Bootstrap：在MENU外部單擊時如何關閉打開的折疊導航欄？

Question

當用戶在菜單外部單擊時，我不僅要在導航欄元素外部單擊，還要關閉菜單。 因為我的菜單中有更多折疊項，所以該解決方案對我不起作用： 在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>

Answer 1

你可以使用這個如果沒有點擊一個鏈接到崩潰： 小提琴

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

該解決方案處理：

• 單頁網站/應用程序（也可以在多頁上使用）。
• 點擊：
  • .navbar-toggle元素（可以是<buttons>或<a> ，它可以處理對諸如<span>或<strong>類的潛在內部元素的單擊）。
  • 在簡單的<a>元素上（再次，它處理內部元素的點擊）。
  • 就在某個特定父級之外（即.navbar ）。
• 多個可能會打開的.collapse （ .collapse ）元素（與它們在DOM中的放置位置不同）。

還不夠嗎？ 沒問題。 您可以自定義傳遞給jQuery的大多數選擇器（ document ， .collapse ， .navbar等）以適合您的需求，甚至添加更多條件。