Question

我有以下引导程序导航栏;

<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和＆amp; 4我得到了所需的颜色＆amp;背景颜色使用以下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

Answer 1

使用以下代码实现;

$('nav li').on('click', function() {
    $('nav li').removeClass('active');
    $(this).addClass('active');
});

小提琴：link

Answer 2

我添加了一条新规则.navbar-default .nav .dropdown.open＆gt; a这个现有的CSS代码。

CSS

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus,
.navbar-default .nav .dropdown.open > a
{
    color: #fbfbfb;
    background-color: #105b9c;
}

希望这会有所帮助..

如何在bootstrap下拉列表中使用活动类

2 个答案: