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

我想在用户点击菜单外部时关闭我的菜单，而不仅仅是在navbar元素之外。 因为我的菜单中有更多折叠，所以此解决方案对我不起作用： 如何在Bootstrap 3中单击导航栏元素外部时关闭打开的折叠导航栏？ 当我在菜单外单击时菜单消失，但是当我点击带有下拉菜单的链接时，整个菜单会崩溃。

 
 
 Webshop 
 Industriële verpakkingen Promotionele verpakkingen Gelamineerde verpakkingen Enveloppen &verzend verpakkingen Medische verpakkingen Co-packing 
 
  

Answer 1

如果不点击链接，你可以使用它来折叠： 小提琴

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

Answer 2

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

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元素（可以是或 ，它处理潜在内部元素的点击，如或或其他）。
  • 在简单的元素上（同样，它处理内部元素的点击）。
  • 就在某个特定的父母之外（即.navbar ）。
• 可打开的多个.collapse （ .collapse ）元素（与它们放置在DOM中的位置不明显）。

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