当点击另一个下拉菜单时，引导关闭下拉菜单答案

【问题标题】：bootstrap close the drop down when clicked on another dropdown当点击另一个下拉菜单时，引导关闭下拉菜单
【发布时间】：2015-03-16 10:40:02
【问题描述】：

我有一个引导菜单，在响应模式下，当我点击一个菜单项时，它会展开，但是当我点击第二个菜单项时，它的子菜单会展开，但第一个不会关闭。

这是我的菜单

<ul class="clearfix">
    <li class="logo">
        <a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
            <img class="logo img-responsive logo_desktop" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
            <img class="logo img-responsive logo_mobile" src="{$logo_url|replace:'rdx-sports-1400756719.jpg':'logo_rdxsports.png'}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
        </a>
    </li>

    <li> <a class="dropdown-toggle" data-toggle="collapse" href="#menu" aria-expanded="false" aria-controls="collapseExample"><i class="glyphicon glyphicon-align-justify"></i></a> </li>
    <li> <a class="dropdown-toggle" data-toggle="collapse" href="#search" aria-expanded="false" aria-controls="collapseExample"><i class="glyphicon glyphicon-search"></i>  </a></li>
    <li><a class="dropdown-toggle" data-toggle="collapse" href="#language" aria-expanded="false" aria-controls="collapseExample"><i class="glyphicon glyphicon-globe"></i>  </a></li>
    <li><a class="dropdown-toggle" data-toggle="collapse" href="#account" aria-expanded="false" aria-controls="collapseExample"><i class="glyphicon glyphicon-user"></i>  </a></li>
    <li><a class="dropdown-toggle" id="trigger-cart-dropdown" data-toggle="collapse" href="#cart" aria-expanded="false" aria-controls="collapseExample"><i class="glyphicon glyphicon-shopping-cart"></i><span class="badge">0</span>  </a></li>
</ul>

【问题讨论】：

你能提供小提琴吗..

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

尝试添加这个。希望这是你想要的！！

$( ".dropdown-submenu" ).click(function(event) {
    // stop bootstrap.js to hide the parents
    event.stopPropagation();
    // hide the open children
    $( this ).find(".dropdown-submenu").removeClass('open');
    // add 'open' class to all parents with class 'dropdown-submenu'
    $( this ).parents(".dropdown-submenu").addClass('open');
    // this is also open (or was)
    $( this ).toggleClass('open');
});

或者试试这个编辑：要处理子菜单，请确保他们的切换锚点上有下拉切换类。

$(function () { 
        $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                $('.navbar-toggle:visible').click(); 
        }); 
});

添加对手机触控的支持。

$(function () {
        $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                $('.navbar-toggle:visible').click();
        });
});

SOURCE

【讨论】：