Bootstrap:在MENU外部单击时如何关闭打开的折叠导航栏? [英] Bootstrap: How to close an open collapsed navbar when clicking outside of the MENU?

问题描述

我希望用户在菜单外单击时不仅在导航栏元素外单击而关闭菜单.因为我的菜单中有更多折叠，所以该解决方案不适用于我:

I want to have my menu closed when the user clicks outside the menu, not only outside the navbar element. Because I have more collapses in my menu, this solution did not work for me: How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3? The menu disapeares when I click outside the menu, but when I click on the link with a dropdown, the whole menu collapses.

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

推荐答案

如果不单击链接，则可以使用它折叠: 小提琴

You can use this to collapse if not clicking a link: fiddle

$(document).click(function(e) {
    if (!$(e.target).is('a')) {
        $('.collapse').collapse('hide');        
    }
});

这篇关于Bootstrap:在MENU外部单击时如何关闭打开的折叠导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！