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

Posted 2023-02-22

【中文标题】Bootstrap：单击菜单外部时如何关闭打开的折叠导航栏？

【英文标题】：Bootstrap: How to close an open collapsed navbar when clicking outside of the MENU?

【发布时间】：2016-02-22 19:08:28

【问题描述】：

我希望当用户在菜单外点击时关闭我的菜单，而不仅仅是在导航栏元素之外。因为我的菜单中有更多折叠，所以这个解决方案对我不起作用：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>

【问题讨论】：

你能创建一个小提琴或引导这个

发布你的 html 的其余部分

【参考方案1】：

如果不点击链接，您可以使用它来折叠：fiddle

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

【讨论】：

我通过将 navbar- 添加到 .collapse 解决了这个问题。感谢您的帮助！

您可以将in 类添加到collapse 以保持隐藏；）

当点击搜索 字段时，菜单隐藏...我该如何解决这个问题？

像这样添加另一个条件：if (!$(e.target).is('a') && !$(e.target).is('input')) ...

我已经完成了这项工作，但是当我单击子菜单链接并打开一个模式窗口时，它也会关闭子菜单。有什么想法吗？

【参考方案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

【参考方案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) 元素可能处于打开状态（无法区分它们在 DOM 中的放置位置）。

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