Bootstrap下拉菜單：當它處於活動狀態時更改下拉圖標？

我有以下設置：Bootstrap下拉菜單：當它處於活動狀態時更改下拉圖標？

<div data-ng-repeat="item in navigationBar.navObject.items" class="btn-group"> 
    <button data-ng-class="{current: $last}" class="btn btn-default btn-xs" type="button" data-ng-click="navigationBar.goToState(item)"> {{item.name}}</button> 
    <button data-ng-hide="item.isTerminal" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button"> 
    <span class="fa fa-fw fa-caret-right"></span>       
    </button> 
    <ul class="dropdown-menu"> 
    <li data-ng-repeat="subItem in item.subItems"><a data-ng-click="subItem.item.goToState()">{{subItem.name}}</a></li>    
    </ul> 
</div>

而且我想在下拉菜單中的圖標從FA-脫字向右變更爲FA-脫字下來的時候下拉列表是可見的。有什麼辦法可以嚴格使用CSS嗎？

來源

2014-04-01 Bogdan

您將無法更改使用CSS的HTML元素的屬性，你可能會想使用jQuery來代替。

引導有一些漂亮的JavaScript的事情，其中在使用你的網站裏面的自舉元素，你可以執行自己的腳本。

初始化下拉利用這裏面的jQuery。

$('.dropdown-toggle').dropdown();

當它被稱爲你可以連接使用的引導文件中指定的手柄不同的操作它。（'show.bs.dropdown'，function（）{}）;僅僅是說一個奇特的詞「上下拉」

$('.dropdown-toggle').on('show.bs.dropdown', function() { // All actions to fire after the dropdown is shown go here. $('.fa .fa-fw').addClass('fa-caret-right'); $('.fa .fa-fw').removeClass('fa-caret-down'); })

來源

2014-04-01 10:42:02 Saidin

我知道這是一個古老的職位，但我一直在尋找這樣的解決方案，並有一個對我的作品。您可以定位並更改該範圍內的僞元素。當你點擊這個按鈕時，這個按鈕是不是添加了一個open類？所以，後來的CSS看起來像：

btn.open .fa-caret-right:before { content: "\e114"; }

使用添加到按鈕類.open。的\e114是向下箭頭的角色。

來源

2016-04-19 20:31:15

Bootstrap下拉菜單：當它處於活動狀態時更改下拉圖標？

回答

相關問題