Bootstrap 4在點擊下拉菜單中更改插入符號

Question

使用引導程序4，我正在嘗試使用插入符號創建下拉列表（例如：指向右側）。在點擊下拉菜單時，應該改變脫字符指示方向（例如：向下）。

我有一個way to do that

/*Please refer the above link for full code details*/ 

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      Collapsible Group Item #1 
</a> 

<div id="collapseOne" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
     This content is hidden 
     </div> 
</div> 

的.css

.panel-heading .accordion-toggle:after { 
    font-family: 'Glyphicons Halflings'; 
    content: "\e114"; 
    float: right; 
    color: grey; 
} 
.panel-heading .accordion-toggle.collapsed:after { 
    content: "\e080"; 
} 

但美中不足的是，指向下降，這應是正確的

最初有所有的插入記號其他approaches。但我不想使用JQuery，因爲我的應用程序是角度4.想盡可能避免使用JQuery/JS。

這不是duplicate的問題。

提前感謝...

Answer 1

在引導V4他們已經放棄了Glyphicons。下面的代碼將根據您的需要運行良好。 對於下拉圖標樣式，您可以使用字體真棒。

[data-toggle="collapse"]:after { 
 
display: inline-block; 
 
    display: inline-block; 
 
    font: normal normal normal 14px/1 FontAwesome; 
 
    font-size: inherit; 
 
    text-rendering: auto; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    content: "\f054"; 
 
    transform: rotate(90deg) ; 
 
    transition: all linear 0.25s; 
 
    float: right; 
 
    } 
 
[data-toggle="collapse"].collapsed:after { 
 
    transform: rotate(0deg) ; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="accordion" role="tablist"> 
 
    <div class="card"> 
 
    <div class="card-header" role="tab" id="headingOne"> 
 
     <h5 class="mb-0"> 
 
     <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
      Collapsible Group Item #1 
 
     </a> 
 
     </h5> 
 
    </div> 
 

 
    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion"> 
 
     <div class="card-body"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <div class="card-header" role="tab" id="headingTwo"> 
 
     <h5 class="mb-0"> 
 
     <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
      Collapsible Group Item #2 
 
     </a> 
 
     </h5> 
 
    </div> 
 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"> 
 
     <div class="card-body"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <div class="card-header" role="tab" id="headingThree"> 
 
     <h5 class="mb-0"> 
 
     <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
 
      Collapsible Group Item #3 
 
     </a> 
 
     </h5> 
 
    </div> 
 
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"> 
 
     <div class="card-body"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

這裏是codepen demo link

注：在您的演示鏈接他們使用引導V3。

Answer 2

下面是我如何使用Bootstrap4-CSS-fontAwesome &沒有JS/JQuery。

<a class="accordion-toggle collapsed" data-toggle="collapse" href="#anyId"> 
    click 
</a> 

<div id="anyId" class="collapse"> 
    Hi 
</div> 

<!-- CDNs for font-awesome, bootstrap, JQuery --> 
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 

的.css

.accordion-toggle:after { 
    font-family: 'FontAwesome';/* essential to enable caret symbol*/ 
    content: "\f0d7";/* adjust as needed, taken from font-awesome.css */ 
    color: grey; 
} 
.accordion-toggle.collapsed:after { 
    /* symbol for "collapsed" panels */ 
    content: "\f0da"; /* adjust as needed, taken from font-awesome.css */ 
} 

謝謝@Satheesh庫馬爾