摺疊時引導3導航/列表更改圖標

Question

我有一個使用Bootstrap的可摺疊列表，當內容摺疊時，我無法實現圖標的更改。我試過以下這篇文章：http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp，但我不知道如何定義&:before.collapse.in css類來改變它。

有人可以幫我嗎？

HTML：

<ul class="ls-nav"> 
      <li><!-- 
      --><a role="button" data-toggle="collapse" href="#collapseContent" aria-expanded="true" aria-controls="collapseContent"><!-- 
      -->Lorem ipsum 
      </a> 
      <div class="collapse" id="collapseContent"> 
       <ul class="ls-inner"> 
       <li>Lorem ipsum</li> 
       <li>Lorem ipsum</li> 
       <li> 
        <a role="button" data-toggle="collapse" href="#collapseContent-2" aria-expanded="true" aria-controls="collapseContent-2"><!-- 
        -->Lorem ipsum 
        </a> 
        <div class="collapse" id="collapseContent-2"> 
        <ul class="ls-inner-dot"> 
        <li class="active">Lorem ipsum</li> 
        <li>Lorem ipsum</li> 
        </ul> 
        </div> 
       </li> 
       <li>Lorem ipsum</li> 
       </ul> 
      </div> 
      </li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
     </ul> 

SCSS/CSS：

.ls-nav { 
    } 
    li { 
     list-style: none;  
     &:before { 
      font-family: 'Fonticons'; 
      content: "\f009"; 
     } 
     &:before .collapse.in { 
      content: "\f00a" 
     } 
    } 
    .ls-inner { 
     padding-left: 15px; 
     li { 
      &:before { 
       font-size: 0.6rem; 
       line-height: 0.8rem; 
       vertical-align: middle; 
      } 
     } 
     .ls-inner-dot { 
      padding-left: 15px; 
      .active { 
       color: $color_sail_approx; 
      } 
      li:before { 
       content: "●"; 
      } 
     } 
    } 
} 

Answer 1

你不能僞選擇像:before或:after後目標CSS類。此外，如果你想要一個純粹的CSS解決方案，你需要改變你的HTML標記，以便能夠定位你的元素。

如果使用這樣的，它的工作原理：

<div class="ls-nav"> 
<div class="panel-group" role="tablist"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="collapseListGroupHeading1"> 
     <h4 class="panel-title"> 
      <a class="collapsed" role="button" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="false" aria-controls="collapseListGroup1"> 
      Collapsible list group 
      </a> 
     </h4> 
     </div> 
     <div id="collapseListGroup1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1"> 
     <ul class="list-group"> 
      <li class="list-group-item">Bootply</li> 
      <li class="list-group-item">One itmus ac facilin</li> 
      <li class="list-group-item">Second eros</li> 
     </ul> 
     <div class="panel-footer">Footer</div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

.ls-nav .panel a.collapsed:before { 
    font-family: FontAwesome; 
    content:"\f07b"; 
    } 
    .ls-nav .panel a:before { 
    font-family: FontAwesome; 
    content:"\f07c"; 
    } 

Working Example