Question

我正在使用Bootstrap响应式导航栏。折叠导航栏并打开菜单并单击菜单项时，菜单不会自动关闭，我必须自己手动完成。

单击其中一个按钮后，是否可以自动关闭菜单？

Answer 1

bootstrap 3的工作解决方案

$('.navbar-collapse a').click(function(){
    $(".navbar-collapse").collapse('hide');
});

Answer 2

修改正如Maximus所指出的那样， 3.x bootstrap 解决方案是：

$('.navbar-collapse a').click(function(){ $(".navbar-collapse").collapse('hide'); });

https://jsfiddle.net/yohuLuj2/

2.x bootstrap的旧答案：

您应该可以通过向列表项添加单击处理程序然后以这种方式关闭导航来实现此目的。

$('.nav-collapse').click('li', function() { $('.nav-collapse').collapse('hide'); });

Heres a jsfiddle： http://jsfiddle.net/hajpoj/By6ym/4/

Answer 3

我只是在每个链接上复制btn-navbar的2个属性（data-toggle =“collapse”data-target =“。nav-collapse”），如下所示：

<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
    <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse">Services</a></li>
    <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
  </ul>
</div>

Answer 4

只有我添加到jason的解决方案才是下拉菜单的例外。如果有人只是点击切换子菜单，您就不想关闭菜单。所以......

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    $(".navbar-collapse").collapse('hide');
});

Answer 5

@ Mike的下拉解决方案对我有用，只是下拉切换中的项目不会隐藏菜单，所以我确保添加这个：

$('.navbar-collapse .dropdown-menu').click(function(){
    $(".navbar-collapse").collapse('hide');
});

Answer 6

只需记住遍历DOM树并关闭相关的Navbar，而不是所有Navbars。特别是对于Bootstrap 3，使用类似于以下代码片段的内容：

$("body").on("click", ".navbar-collapse a", function() {
  var $this = $(this);

  setTimeout(function() {
     $this.closest(".navbar-collapse").collapse('hide');
  }, 350);
});

Answer 7

另一个问题是当你在桌面上看到导航栏时，它会尝试隐藏/显示导航栏，所以我这样做了：

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    if($(window).width() < 768 )
        $('.navbar-collapse').collapse('hide');
});

Answer 8

我通过添加按钮点击管理来完成答案：

$(document).on('click', '.navbar-collapse.collapse.in a:not(.dropdown-toggle)', function() {
    $(this).closest(".navbar-collapse").collapse('hide');
});
$(document).on('click', '.navbar-collapse.collapse.in button:not(.navbar-toggle)', function() {
    $(this).closest(".navbar-collapse").collapse('hide');
});

Answer 9

我的问题是，我正在用锚点创建单页面布局。因此，当您缩小窗口大小时，菜单隐藏链接点击完美。 感谢上面给我提供线索的用户。但是，当在upsize窗口时，绑定事件总是存在（尽管没有重新加载）。所以，这就是我的所作所为。希望它可以帮助某人：）

jQuery.noConflict();
(function($){
    $('ul#menu-menu-with-anchors li a, a[href="#top"]').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top - ($('body').hasClass('admin-bar') ? 160 : 130)
        }, 500);
        return false;
    });

    bindUnbindNavToggle($);
    $(window).resize(function(){
        bindUnbindNavToggle($);
    });

})(jQuery);

function bindUnbindNavToggle($){
    if( $('button.navbar-toggle').css('display') != 'none' ) {
        $('.navbar-collapse ul li a').on('click', function(){
           $('.navbar-collapse').collapse('hide');
            return false;
        });
    }
    else {
        $('.navbar-collapse ul li a').on('click', function(){
            return false;
        });
    }
}

Answer 10

如果您使用Angular，则可以将折叠绑定到路线导航：

$scope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){ $(".navbar-collapse").collapse('hide'); });

Answer 11

只需将此代码放在main.js

中即可

 $(document).on('click', '.navbar-collapse.in', function (e) {
    if ($(e.target).is('a')) {
        $(this).collapse('hide');
    }
});

Answer 12

也许有人需要隐藏菜单，只需点击其他地方（我想假设没有子菜单）。然后在jquery，bootstrap.js

之后添加此代码

$('button.navbar-toggle').focusout(function(){
        $(".navbar-collapse").collapse('hide');
    });

自动关闭响应式导航栏

12 个答案: