html - Bootstrap 切换下拉菜单而不创建事件菜单项

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>

这是试图完成的是，当用户单击搜索图标时，会下拉一个小的搜索表单。除了我的代码然后将搜索图标设置为事件菜单项之外，所有这些都有效。

See my screencast

我想要的是它只下拉搜索框而不更改事件菜单项。

See my JSFiddle

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

Answer 1

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

.open a {
   background: initial !important;
}