[英]jQuery hide bootstrap slide menu when clicked anywhere on the screen
Made a Fiddle here: 在这里开小提琴:
https://jsfiddle.net/r94dq2e4/ https://jsfiddle.net/r94dq2e4/
I am using twitter bootstap version 3 with a slide in menu from the left when navbar toggle button is clicked. 单击导航栏切换按钮时,我在左侧菜单中的幻灯片中使用了twitter boottap版本3。
This is the jQuery code I'm using: 这是我正在使用的jQuery代码:
// Nav
(function ($) {
'use strict';
// Toggle classes in body for syncing sliding animation with other elements
$('#bs-example-navbar-collapse-2')
.on('show.bs.collapse', function (e) {
$('body').addClass('menu-slider');
})
.on('shown.bs.collapse', function (e) {
$('body').addClass('in');
})
.on('hide.bs.collapse', function (e) {
$('body').removeClass('menu-slider');
})
.on('hidden.bs.collapse', function (e) {
$('body').removeClass('in');
});
})(jQuery);
This works well and on first click of the navbar toggle button, the menu slides in, when clicked again, the menu slides out. 效果很好,在第一次单击导航栏切换按钮时,菜单会滑入,再次单击时,菜单会滑出。 I would like to enhance this functionality in such a way that the menu slides out when the user clicks anywhere on the page except for the menu itself.
我想以这种方式增强此功能,即当用户单击页面上除菜单本身以外的任何位置时,菜单都会滑出。
This is my HTML for the menu: 这是菜单的HTML:
Toggle navigation Menu 切换导航菜单
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Treatments<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Menu Item</span></a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Meet the team</a></li>
<li><a href="#">See the results</a></li>
<li><a href="#">Cost</a></li>
<li><a href="#">Information</a></li>
</ul><!-- end navbar-nav -->
</div><!-- end navbar-collapse -->
</nav><!-- end navbar -->
I have started with the following jQuery code to achieve this. 我已经开始使用以下jQuery代码来实现此目的。 But I would need some help in where to go from here:
但我需要从这里出发的一些帮助:
/* Nav click outside hide navbar */
$(document).click(function(e){
// Check if click was triggered on or within #menu_content
if( $(e.target).closest("#navbar2").length > 0 ) {
return false;
}
// Otherwise
// trigger your click function
$('body').removeClass('menu-slider');
$('body').removeClass('in');
});
Thank you 谢谢
There are 3 things that you need to check in order to see if you should close the menu: 您需要检查三件事,以查看是否应该关闭菜单:
.nav
) .nav
) .navbar-cllapse
) .navbar-cllapse
) .parents('.nav')
) .parents('.nav')
)的子元素 if (!$(e.target).hasClass('navbar-collapse') && !$(e.target).hasClass('nav') && $(e.target).parents('.nav').length == 0) {
$('#bs-example-navbar-collapse-2').removeClass('in');
}
You can try it in this fiddle: https://jsfiddle.net/r94dq2e4/1/ 您可以在这个小提琴中尝试一下: https : //jsfiddle.net/r94dq2e4/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.