Bootstrapclosures响应菜单“点击”
在“产品”上单击我滑动一个白色的div（如附件所示）。 在响应式（手机和平板电脑）时，我想自动closures响应式导航栏，只显示白色条。
我试过了：
$('.btn-navbar').click(); 也试过了：
$('.nav-collapse').toggle();
它确实有效。 然而，在桌面大小，它也被称为，做一些时髦的菜单，它缩小了一秒钟。
有任何想法吗？
我有它的animation工作！
html中的菜单：
<div id="nav-main" class="nav-collapse collapse"> <ul class="nav"> <li> <a href='#somewhere'>Somewhere</a> </li> </ul> </div>
绑定导航中所有元素的点击事件折叠菜单（引导程序崩溃插件）：
$(function(){ var navMain = $("#nav-main"); navMain.on("click", "a", null, function () { navMain.collapse('hide'); }); });
编辑为了使它更通用，我们可以使用下面的代码片段
$(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'); }); });
您不必为引导程序折叠选项添加任何额外的JavaScript。 而只需在菜单列表项中包含数据切换和数据目标select器，就像使用导航栏切换button一样。 所以对于你的产品菜单项，它看起来像这样
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
然后，您需要为每个菜单项重复数据切换和数据目标select器
编辑！！！ 为了解决溢出问题和闪烁这个修复我添加了一些更多的代码，将解决这个问题，仍然没有任何额外的JavaScript。 这是新的代码：
<li><a href="#products" class="hidden-xs">Products</a></li> <li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
这是在工作http://jsfiddle.net/jaketaylor/84mqazgq/
这将使您的切换和目标select器特定于屏幕大小，并消除大菜单上的毛刺。 如果有人仍然有毛病问题，请让我知道，我会find一个修复。 谢谢
我想你们都是工程师
$('.navbar-collapse ul li a').click(function(){ $('.navbar-toggle:visible').click(); });
编辑：要照顾子菜单，确保其切换锚点上有下拉切换类。
$(function () { $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { $('.navbar-toggle:visible').click(); }); });
编辑2：添加对手机触摸的支持。
$(function () { $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () { $('.navbar-toggle:visible').click(); }); });
我真的很喜欢杰克·泰勒的想法，没有额外的JavaScript，并利用Bootstrap的折叠切换。 我发现你可以通过稍微修改data-targetselect器以包含in class来修正当菜单不处于折叠模式时出现的“闪烁”问题。 所以看起来像这样：
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>
我没有用嵌套下拉菜单testing它，所以YMMV。
这工作，但不animation。
$('.btn-navbar').addClass('collapsed'); $('.nav-collapse').removeClass('in').css('height', '0');
我假设你有一个像这样定义导航区的线，基于Bootstrap的例子和所有
<div class="nav-collapse collapse" >
只需添加属性，就像在菜单button上一样
<div class="nav-collapse collapse" data-toggle="collapse" data-target=".nav-collapse">
我也join了<body> ，工作。 不能说我已经描述过它或任何东西，但对我来说似乎是一种享受…直到你点击UI的随机点打开菜单，所以不是那么好。
DK
在HTML中，我为每个导航链接的标签添加了一个导航链接类。
$('.nav-link').click( function () { $('.navbar-collapse').removeClass('in'); } );
只需要说明user1040259的解决scheme，将此代码添加到$（document）.ready（function（）{}）;
$('.nav').click( function() { $('.btn-navbar').addClass('collapsed'); $('.nav-collapse').removeClass('in').css('height', '0'); });
正如他们所提到的，这并不影响移动…但它确实closures了导航栏的select
对于那些使用AngularJS和Angular UI Router的人来说，这里是我的解决scheme（使用mollwe的切换）。 其中“.navbar-main-collapse”是我的“数据目标”。
创build指令：
module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) { return { restrict: 'C', link: function (scope, element) { //watch for state/route change (Angular UI Router specific) $rootScope.$on('$stateChangeSuccess', function () { if (!element.hasClass('collapse')) { element.collapse('hide'); } }); } }; }]);
使用指令：
<div class="collapse navbar-collapse navbar-main-collapse"> <your menu>
这个解决scheme在桌面和移动设备上都有很好的工作。
<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse collapse">
只是为了完成，在Bootstrap 4.0.0-beta中使用.show为我工作…
<li> <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a> </li>
我正在使用mollwe函数，但是我添加了2个改进：
a）如果点击链接被折叠（包括其他链接），则避免closures下拉菜单
b）如果您点击可见的网页内容，也隐藏下拉菜单。
jQuery.fn.exists = function() { return this.length > 0; } $(function() { var navMain = $(".navbar-collapse"); navMain.on("click", "a", null, function() { if ($(this).attr("href") !== "#") { navMain.collapse('hide'); } }); $("#content").bind("click", function() { if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) { navMain.collapse('hide'); } }); });
不是最新的线程，但我寻找同样的问题的解决scheme，并find一个（一些其他组合）。
我给了NavButton：
<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...
一个id /标识符如：
<button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
不是最好的“想法” – 但是：适用于我！ 现在你可以检查你的button的可见性（与jQuery），如：
var target = $('#navcop'); if(target.is(":visible")){ $('#navcop').click(); }
（注意：这只是一个代码片断！我在我的导航链接上使用了“onclick”事件（启动一个AJAX Reguest）。
结果是：如果button是“可见的”它被“点击”…所以：没有错误，如果你使用Bootstrap的“全屏视图”（宽度超过940px）。
问候拉尔夫
PS：IE9，IE10和Firefox 25都能正常工作。没有检查过其他人 – 但是我看不到问题:-)
这应该做的伎俩。
需要bootstrap.js。
示例=> http://getbootstrap.com/javascript/#collapse
$('.nav li a').click(function() { $('#nav-main').collapse('hide'); });
这与将“data-toggle =”collapse“”和“href =”yournavigationID“'属性添加到导航菜单标签中的做法是一样的。
这对我有效。 我做了像，当我点击菜单button，即时通讯添加或删除类中，因为通过添加或删除该类切换工作在默认情况下。 'e.stopPropagation（）'是通过bootstrap停止默认的animation（我猜）你也可以使用'toggleClass'来代替添加或删除类。
$（'＃ChangeToggle'）。on（'click'，function（e）{
if ($('.navbar-collapse').hasClass('in')) { $('.navbar-collapse').removeClass('in'); e.stopPropagation(); } else { $('.navbar-collapse').addClass('in'); $('.navbar-collapse').collapse(); } });
你可以使用
ul.nav { display: none; }
这将默认closures导航栏。 请让我知道任何人认为这有用
例如，如果您的切换function图标仅适用于额外的小设备，则可以这样做：
$('[data-toggle="offcanvas"]').click(function () { $('#side-menu').toggleClass('hidden-xs'); });
点击[data-toggle =“offcanvas”]会将bootstrap的.hidden-xs添加到我的＃侧面菜单中，这会隐藏侧边菜单的内容，但是如果增加窗口大小将会变得可见。
如果菜单的HTML是
<div id="nav-main" class="nav-collapse collapse"> <ul class="nav"> <li> <a href='#somewhere'>Somewhere</a> </li> </ul> </div>
在导航上切换'in'类被添加并从切换中删除。 检查响应菜单是否打开，然后执行closures切换。
$('.nav-collapse .nav a').on('click', function(){ if ( $( '.nav-collapse' ).hasClass('in') ) { $('.navbar-toggle').click(); } });
$('.navbar-toggle').trigger('click');
