Question

我有以下设置：

<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-caret-right变为fa-caret-down。有没有办法严格用CSS做这个？

Answer 1

您将无法使用CSS更改HTML元素的属性，您可能希望改用jQuery。

Bootstrap有一些漂亮的JavaScript，你可以在你的网站内使用boostrap元素时执行你自己的脚本。

使用jQuery内部初始化下拉列表。

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

当它被调用时，你可以使用bootstrap文档中指定的句柄挂钩不同的操作。 on（'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'); })

Answer 2

我知道这是一个老帖子，但我一直在寻找这个解决方案并且有一个适合我的方案。您可以定位和更改该范围内的伪元素。单击按钮时，按钮是否添加open类？所以，然后css看起来像：

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

使用添加到按钮类的.open。 \e114是向下箭头的字符。

Bootstrap下拉列表：当它处于活动状态时更改下拉图标？

2 个答案: