Bootstrap: 如何在菜单外单击时关闭打开的折叠导航栏?
Bootstrap: How to close an open collapsed navbar when clicking outside of the MENU?
我想在用户单击菜单外部时关闭我的菜单,而不仅仅是在导航栏元素外部单击。因为我的菜单中有更多折叠,所以这个解决方案对我不起作用: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>
如果不单击 link,您可以使用此折叠:fiddle
$(document).click(function(e) {
if (!$(e.target).is('a')) {
$('.collapse').collapse('hide');
}
});
另一种选择,您可以在下面添加代码:
<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
这是我对此的看法:
$(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
等)的选择器以满足您的需要,甚至可以添加更多条件。
我想在用户单击菜单外部时关闭我的菜单,而不仅仅是在导航栏元素外部单击。因为我的菜单中有更多折叠,所以这个解决方案对我不起作用: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>
如果不单击 link,您可以使用此折叠:fiddle
$(document).click(function(e) {
if (!$(e.target).is('a')) {
$('.collapse').collapse('hide');
}
});
另一种选择,您可以在下面添加代码:
<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
这是我对此的看法:
$(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
等)的选择器以满足您的需要,甚至可以添加更多条件。