Bootstrap 关闭响应式菜单“点击" [英] Bootstrap close responsive menu "on click"
问题描述
在产品"上点击我向上滑动一个白色 div(如附件所示).在响应式(移动设备和平板电脑)中,我想自动关闭响应式导航栏并仅显示白色栏.
我试过了:
$('.btn-navbar').click();
也尝试过:
$('.nav-collapse').toggle();
它确实有效.然而,在桌面大小中,它也被称为并对它收缩一秒钟的菜单做了一些时髦的事情.
有什么想法吗?
我已经用它来处理动画了!
html 中的菜单:
将导航中所有元素的点击事件绑定到折叠菜单(Bootstrap 折叠插件):
$(function(){var navMain = $("#nav-main");navMain.on("click", "a", null, function () {navMain.collapse('隐藏');});});
编辑为了使它更通用,我们可以使用以下代码片段
$(function(){var navMain = $(".navbar-collapse");//避免对#id 的依赖//"a:not([data-toggle])" - 避免引起的问题//当你在导航栏中有下拉菜单时navMain.on("click", "a:not([data-toggle])", null, function () {navMain.collapse('隐藏');});});
On "PRODUCTS" click I slide up a white div (as seen in attached). When in responsive (mobile and tablet), I would like to automaticly close the responsive navbar and only show the white bar.
I tried:
$('.btn-navbar').click();
also tried:
$('.nav-collapse').toggle();
And it does work. However in desktop size, it is also called and does something funky to the menu where it shrinks for a second.
Any ideas?
I've got it to work with animation!
Menu in html:
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
Binding click event on all a elements in navigation to collapse menu (Bootstrap collapse plugin):
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
EDIT To make it more generic we can use following code snippet
$(function(){
var navMain = $(".navbar-collapse"); // avoid dependency on #id
// "a:not([data-toggle])" - to avoid issues caused
// when you have dropdown inside navbar
navMain.on("click", "a:not([data-toggle])", null, function () {
navMain.collapse('hide');
});
});
这篇关于Bootstrap 关闭响应式菜单“点击"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!