40

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

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

4

13 回答 13

45

引导程序 3 的工作解决方案

$('.navbar-collapse a').click(function(){
    $(".navbar-collapse").collapse('hide');
});
于 2014-02-21T17:42:48.987 回答
41

编辑： 正如Maximus在下面指出的，3.x 引导解决方案是：

$('.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');
});

这是一个jsfiddle：http: //jsfiddle.net/hajpoj/By6ym/4/

于 2013-01-10T02:38:42.963 回答
33

我只是在每个链接上复制 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>
于 2014-02-15T12:31:40.010 回答
11

我要添加到 jason 的解决方案中的唯一一件事是下拉列表的例外。如果有人只是单击切换子菜单，您不想关闭菜单。所以……</p> 

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    $(".navbar-collapse").collapse('hide');
});
于 2014-08-08T16:49:24.350 回答
8

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

$('.navbar-collapse .dropdown-menu').click(function(){
    $(".navbar-collapse").collapse('hide');
});
于 2014-12-01T23:46:25.783 回答
3

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

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

  setTimeout(function() {
     $this.closest(".navbar-collapse").collapse('hide');
  }, 350);
});
于 2013-12-16T04:09:17.643 回答
3

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

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    if($(window).width() < 768 )
        $('.navbar-collapse').collapse('hide');
});
于 2014-09-08T15:41:42.250 回答
2

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

$(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');
});
于 2014-10-04T08:22:27.640 回答
0

我的问题是，我正在使用锚点创建单页布局。所以，当你缩小窗口时，菜单隐藏在链接点击完美。感谢上面给我线索的用户。但是，当放大窗口时，绑定事件总是存在（虽然没有重新加载）。所以，这就是我所做的。希望它可以帮助某人:)

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;
        });
    }
}
于 2015-04-03T18:13:29.067 回答
0

如果你使用 Angular，你可以将折叠绑定到路由导航：

$scope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){ $(".navbar-collapse").collapse('hide'); });
于 2015-05-29T19:52:21.753 回答
0

只需将此代码放在 main.js 中

 $(document).on('click', '.navbar-collapse.in', function (e) {
    if ($(e.target).is('a')) {
        $(this).collapse('hide');
    }
});
于 2016-03-14T12:31:36.010 回答
0

也许有人需要在点击其他地方时隐藏菜单（我以为没有子菜单）。然后在jquery之后的某个地方添加这段代码，bootstrap.js 

$('button.navbar-toggle').focusout(function(){
        $(".navbar-collapse").collapse('hide');
    });
于 2016-10-18T19:27:13.523 回答
0

ZU1779 答案是我最喜欢的。

无论如何，基于组件的实现（如 Bootstrap-vue）将不起作用。

在这种情况下，您可以在调用模拟单击折叠按钮的函数的链接上添加事件侦听器，链接：

collapseNav = function() {
  document
    .getElementsByClassName('navbar-toggler')[0]
    .dispatchEvent(new Event('click'))
}

希望可能有用。

于 2021-12-16T17:30:50.453 回答