javascript - Bootstrap 在单击另一个下拉菜单时关闭下拉菜单

Question

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

这是我的菜单

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

Answer 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');
});

或者试试这个编辑:要处理子菜单，请确保它们的切换 anchor 上有下拉切换类。

$(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