jquery – Bootstrap:如何在菜单外单击时关闭打开的折叠导航栏?

前端之家收集整理的这篇文章主要介绍了jquery – Bootstrap:如何在菜单外单击时关闭打开的折叠导航栏?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在用户点击菜单外部时关闭我的菜单,而不仅仅是在navbar元素之外.因为我的菜单中有更多崩溃,这个解决方案对我不起作用: How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?
当我在菜单外单击时菜单消失,但是当我点击带有下拉菜单链接时,整个菜单会崩溃.
<div class="collapse navbar-collapse nav-mobile" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="list-group panel">
            <a href="#submenu-1" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Webshop</a>
            <ul class="collapse" id="submenu-1">
                <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Industriële verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Promotionele verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Gelamineerde verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Enveloppen &verzend verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Medische verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Co-packing</a>
            </ul>
        </li>
    </ul>

解决方法

如果不单击链接,则可以使用此折叠: fiddle
$(document).click(function(e) {
    if (!$(e.target).is('a')) {
        $('.collapse').collapse('hide');        
    }
});
原文链接:https://www.f2er.com/jquery/180527.html

猜你在找的jQuery相关文章