启动开关下拉，不使活动菜单项

Question

我有以下HTML代码:

<nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid black-back">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Judicial Workbench</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Calendar</a></li>
                <li><a href="#">Min/Mandatory Chart</a></li>
            </ul>
            <div class="pull-right white">
                <span>Welcome, Judge Mathis!</span>
                <ul class="nav navbar-nav navbar-right white">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search search"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <form class="navbar-form navbar-left" role="search">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Search">
                                    </div>
                                    <button type="submit" class="btn btn-default btn-block submitBtn">Submit</button>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>
                <a href="#"><span class="glyphicon glyphicon-cog white settings"></span></a>
            </div>
        </div>
    </nav>

这样做的目的是当用户单击搜索图标时，会弹出一个小的搜索表单。所有的工作，除了我的代码然后设置搜索图标为活动菜单项。

看我的视频

我想让它只是下拉搜索框，而不是改变活动菜单项。

查看我的JSFiddle

上面的JSFiddle似乎工作正常，我不知道为什么，因为它是我的实际代码的复制/粘贴，你可以在上面的截屏中看到运行。关于如何使它工作有什么想法吗?

Answer 1

当您单击按钮时，它会自动添加类open，它具有另一种背景颜色。要保留默认值，可以在CSS中添加:

.open a {
   background: initial !important;
}