我有以下设置:
<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 来做到这一点？
最佳答案
您将无法使用 CSS 更改 HTML 元素的属性，您可能希望改用 jQuery。
Bootstrap 有一些漂亮的 JavaScript，当您使用网站内的 boostrap 元素时，您可以在其中执行自己的脚本。
在 jQuery 中使用这个初始化下拉列表。
$('.dropdown-toggle').dropdown();
当它被调用时，您可以使用 Bootstrap 文档中指定的句柄将不同的操作挂接到它。 on('show.bs.dropdown', function(){});只是说“在下拉菜单上”的花哨词
$('.dropdown-toggle').on('show.bs.dropdown', function () {
//显示下拉列表后要触发的所有操作都放在这里。
$('.fa .fa-fw').addClass('fa-caret-right');
$('.fa .fa-fw').removeClass('fa-caret-down');
})
关于css - Bootstrap 下拉菜单 : change dropdown icon when it's active?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22781096/