Twitter Bootstrap 在下拉菜单打开时关闭可折叠菜单

Twitter Bootstrap close collapsible menu when dropdown menu is open?

本文关键字：可折叠 菜单 Bootstrap 下拉菜单 Twitter      更新时间：2023-09-26

我正在使用Twitter Bootstrap为我的网站创建一个导航栏。我通常使用下拉插件来创建具有多个菜单项的菜单;但是对于我不想关闭的菜单，除非故意这样做（例如搜索框 [1]），我使用折叠插件创建一个可折叠的菜单。

为了给你一个想法，下面是导航栏标记的框架：

<nav class="navbar navbar-default navbar-static-top">
    <div class="navbar-header">
        <a class="navbar-brand" href="/">...</a>
    </div>
    <div class="collapse navbar-collapse">
        <!-- Dropdown Menu -->
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="/categories/" class="dropdown-toggle" data-toggle="dropdown">Categories</a>
                <ul class="dropdown-menu">
                    <li><a href="/tech/">Tech</a></li>
                    <li><a href="/autos/">Autos</a></li>
                    <li><a href="/travel/">Travel</a></li>
                </ul>
            </li>
        </ul>
        <!-- Collapsible Menu -->
        <ul class="nav navbar-nav navbar-right">
            <li id="nav-search" class="collapsible-menu">
                <a data-toggle="collapse" data-target="#nav-searchform" class="collapsed" href="#">Search</a>
                <div id="nav-searchform" class="collapse">
                    <!-- Search Form -->
                </div>
            </li>
        </ul>
    </div>
</nav>

请注意上面代码中<!-- Dropdown Menu -->和<!-- Collapsible Menu -->的注释，分别表示下拉菜单和可折叠菜单。

问题：如果可折叠菜单（除非再次单击菜单，否则不会关闭）处于打开状态，并且用户单击其中一个下拉菜单，则两个菜单都将打开。我希望可折叠菜单在打开下拉菜单时自动关闭。

我该怎么做（用jQuery）？

我已经尝试过这些，但似乎没有一个有效：

jQuery(document).ready(function($){
    $('.dropdown-toggle').click(function() {
        $(this).closest('#nav-search').toggleClass('selected');
    });
});

和

jQuery(document).ready(function($){
    $('.dropdown-toggle').on('show.bs.dropdown', function () {
        $(this).closest('#nav-search').children().toggleClass('in');
    });
});

和

jQuery(document).ready(function($){
    $('.dropdown-toggle').on('show.bs.dropdown', function () {
        $(this).closest('#nav-search').children().removeClass('in');
    });
});
我

不确定我做错了什么。

脚注：

  1. 如果我也将 Bootstrap 的下拉插件用于搜索框，当用户单击输入/文本区域时，下拉菜单将关闭，这就是我选择使用折叠插件的原因。
$('.dropdown').click(function(){
      if($('#nav-searchform').hasClass('in'))
        $('#nav-searchform').collapse('hide');
});

http://www.bootply.com/122096

相关文章：