无论如何，在Navbar中保持Bootstrap Dropdown打开 [英] Keep Bootstrap Dropdown open in Navbar no matter what

问题描述

我在页面加载期间打开的导航栏中嵌套了一个下拉菜单，将 open 类添加到 li 元素。

I have a dropdown menu nested in a navbar that I am opening during page load by adding the open class to the li element containing the dropdown menu.

无论点击什么或用户点击页面，我希望此菜单保持打开状态。我已尝试在Stackoverflow.com上找到类似问题的不同解决方案，但它们都没有工作。它们似乎都涉及阻止点击事件的传播关闭菜单。我正在使用bootstrap v3.3.4。

I want this menu to stay open no matter what is clicked or where a user clicks on the page. I have tried different solutions found on Stackoverflow.com to similar problems, but none of them are working. They all seem to involve stopping the propagation of the click events from closing the menu. I am using bootstrap v3.3.4.

编辑
这是菜单布局：

EDIT Here is the menu layout:

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">

        <li><a href="#" style="color:white;">menu1</a></li>

        <li class="dropdown open">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" id="catalogmenu" aria-expanded="false" style="color:white;">menu 2 <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>

        <li><a href="#" style="color:white;">menu3</a></li>

        <li><a href="#" style="color:white;">menu4</a></li>

        <li><a href="#" style="color:white;">menu5</a></li>
    </ul>
    <div class="navbar-form navbar-right">
        <div class="input-group">
            <input type="text" class="form-control" style="width:310px" placeholder="Search" aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon2">go</span>
        </div>
    </div>
</div>

谢谢。

编辑2
DanDavis评论中的建议是基于我的测试的方法。在这种情况下处理事件和格式化自己比依赖bootstraps原生格式和功能更容易。

EDIT 2 DanDavis suggestion in the comments is the way to go based on my testing. Handling the events and formatting myself is easier in this case than relying on bootstraps native formatting and functionality.

推荐答案

这只使用css。 工作演示

在下拉菜单中添加课程ul（.stay-open）

Add a class to the dropdown ul (.stay-open)

<ul class="dropdown-menu stay-open">

然后应用样式显示块！important

then apply style display block with !important

.stay-open {display:block !important;}

这篇关于无论如何，在Navbar中保持Bootstrap Dropdown打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！