Twitter Bootstrap 单击多个下拉菜单 - jQuery 帮助答案

【问题标题】：Twitter Bootstrap multiple dropdowns on click - jQuery assistanceTwitter Bootstrap 单击多个下拉菜单 - jQuery 帮助
【发布时间】：2013-07-28 23:50:29
【问题描述】：

我需要一些帮助来修改控制引导下拉菜单的 javascript。

我需要做的是，当您单击下拉菜单时，它会显示。在顶层可以正常工作，但是如果我想进入下拉列表中的下拉列表示例：

<ul>
    <li>Dropdown 1
        <ul>
            <li>Dropdown 2
                <ul>
                    <li>List Item</li>
                    <li>List Item</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

当我单击下拉列表 1 时，我可以看到名为下拉列表 2 的列表项，但是当我单击它时，它会再次关闭整个列表项。当您单击下拉菜单 2 时，我需要它显示。我找到了一种悬停方法来打开第二个嵌套下拉菜单，但我需要它在点击时显示。

非常感谢您的帮助。这是一个小提琴：http://jsfiddle.net/raDUC/1/

【问题讨论】：

标签： javascript jquery twitter-bootstrap drop-down-menu

【解决方案1】：

试试这个：

HTML：

<div class="navbar navbar-fixed-top span2">
  <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a>  <a class="brand" href="#">Project Name</a>

    <div class="nav-collapse">
        <ul class="nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a>

                <ul class="dropdown-menu">
                    <li class="dropdown dropdown-nested"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a>

                        <ul class="dropdown-menu">
                            <li>Living and Nonliving things</li>
                        </ul>
                    </li>
                    <li> <a href="#">Another action</a>

                    </li>
                </ul>
            </li>
            <li> <a href="#">Link</a>

            </li>
            <li> <a href="#">Link</a>

            </li>
            <li> <a href="#">Link</a>

            </li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>

                <ul class="dropdown-menu">
                    <li> <a href="#">Action</a>

                    </li>
                    <li> <a href="#">Another action</a>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- /.nav-collapse -->
  </div>
  <!-- /.navbar-inner -->
</div>
<!-- /.navbar -->

JS：

$(function(){
  $('.dropdown-nested').click(function(event){
      event.stopPropagation();
      var dropdown = $(this).children('.dropdown-menu');
      dropdown.toggle();
  });
});

旁注... 我建议在引导程序中将以下 css 添加到您的导航菜单中：

ul.nav a {
    outline: none;
}

如果你点击一个主菜单项来关闭它，它就不会出现那个丑陋的蓝色轮廓。

【讨论】：