我有以下 Bootstrap 导航栏;
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Menu 1</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
当我点击菜单 1、3 和 4 时,我使用以下 CSS 获得了所需的颜色和背景颜色;
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #fbfbfb;
background-color: #105b9c;
}
当我从下拉列表中选择一个选项(选项 1 或选项 2)时,我希望菜单 2 具有相同的效果。目前我还没有明白。
更新: Fiddel link
最佳答案
通过以下代码实现;
$('nav li').on('click', function() {
$('nav li').removeClass('active');
$(this).addClass('active');
});
fiddle :link
关于javascript - 如何在 Bootstrap 下拉菜单中使用事件类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44761771/