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

Question

我想在用户单击菜单外部时关闭我的菜单，而不仅仅是在导航栏元素外部单击。因为我的菜单中有更多折叠，所以这个解决方案对我不起作用：How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3? 当我在菜单外单击时，菜单消失了，但是当我单击带有下拉菜单的 link 时，整个菜单都崩溃了。

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

Answer 1

如果不单击 link，您可以使用此折叠：fiddle

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

Answer 2

另一种选择，您可以在下面添加代码：

<script>
 $(document).ready(function(){
  $(".list-group ").hover(            
  function() {
   $('.collapse', this).stop( true, true ).slideDown("fast");
   $(this).toggleClass('open');        
  },
  function() {
   $('.collapse', this).stop( true, true ).slideUp("fast");
   $(this).toggleClass('open');       
  }
  );
 });
</script>

另一个例子：dtc-eng

Answer 3

这是我对此的看法：

$(document).on('click', function(event){
  var $clickedOn = $(event.target),
      $collapsableItems = $('.collapse'),
      isToggleButton = ($clickedOn.closest('.navbar-toggle').length == 1),
      isLink = ($clickedOn.closest('a').length == 1),
      isOutsideNavbar = ($clickedOn.parents('.navbar').length == 0);

  if( (!isToggleButton && isLink) || isOutsideNavbar ) {
    $collapsableItems.each(function(){
      $(this).collapse('hide');
    });
  }
});

此解决方案处理：

单页 website/applications（也适用于 multi-pages）。
点击次数：
- .navbar-toggle 元素（可以是 <buttons> 或 <a>，它处理对潜在内部元素的点击，如 <span> 或 <strong> 或其他）。
- 在简单的 <a> 元素上（同样，它处理对内部元素的点击）。
- 就在某些特定的 parent 之外（即 .navbar）。
可能打开的多个可折叠 (.collapse) 元素（无法区分它们在 DOM 中的放置位置）。

还不够吗？没问题。您可以自定义大多数传递给 jQuery（document、.collapse、.navbar 等）的选择器以满足您的需要，甚至可以添加更多条件。

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

Bootstrap: How to close an open collapsed navbar when clicking outside of the MENU?

jquery

collapse

dropdown