[英]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?
因为我的菜单中有更多折叠项,所以该解决方案对我不起作用: 在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>
another alternative, you can add code below : 另一种选择,您可以在下面添加代码:
<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>
Here is my take on this: 这是我对此的看法:
$(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');
});
}
});
This solution handles: 该解决方案处理:
.navbar-toggle
elements (could be <buttons>
or <a>
, and it handles clicks on potential inner elements like <span>
or <strong>
or whatever). .navbar-toggle
元素(可以是<buttons>
或<a>
,它可以处理对诸如<span>
或<strong>
类的潜在内部元素的单击)。 <a>
elements (again, it handles clicks on inner elements). <a>
元素上(再次,它处理内部元素的点击)。 .navbar
). .navbar
)。 .collapse
) elements that might be open (indistinct to where they are placed in the DOM). .collapse
( .collapse
)元素(与它们在DOM中的放置位置不同)。 Not enough for you? 还不够吗? No problem.
没问题。 You can customize most of the selectors passed to jQuery (
document
, .collapse
, .navbar
, etc) to suit your needs or even add more conditions. 您可以自定义传递给jQuery的大多数选择器(
document
, .collapse
, .navbar
等)以适合您的需求,甚至添加更多条件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.