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;
}

Bootstrap切换下拉菜单，无需激活菜单项

1 个答案: