javascript - 单击导航栏品牌时关闭 Bootstrap 折叠菜单

Question

我试图让折叠的 navbar - 打开时 - 在点击 navbar-brand 标题时关闭。目前，如果 Bootstrap 折叠的导航栏打开并且导航栏品牌(在本例中为“炸洋葱”)被点击，导航栏不会关闭。它在所有其他情况下关闭。

我想我只需要将 a 添加到 '.navbar-collapse.in' 所以这实际上只是一个语法问题。我尝试了 '.navbar-collapse.in' && 'a' 和 '.navbar-collapse.in || a' 都不起作用。

Here's a plunker

这是相关的 JS。

   $(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
        $(this).collapse('hide');
    }
});


  $(document).ready(function () {

    $(function () {
     /*   $('li a').click(function (e) { */
        $('a').click(function (e) {
            $('a').removeClass('active');
            $(this).addClass('active');
        });
    });
});

Answer 1

Bootstrap 实际上使用 HTML5 打开和关闭导航栏 data-*属性 data-toggle和 data-target .这些通常添加到导航栏的“关闭”按钮，如 data-toggle="collapse"和 data-target="#navbar" .但是您可以将它们添加到任何地方并且它们会起作用。

我已经试过了，它似乎有效:

<a class="navbar-brand" data-toggle="collapse" data-target="#navbar" ui-sref="home">Fried <span class="navbar-brand-bold">Onions</span></a>

它只是添加了 data-toggle="collapse"和 data-target="#navbar"到 .navbar-brand (“炸洋葱”)。

编辑:

如果上述解决方案不起作用，则删除 data-toggle和 data-target来自 .navbar-brand并添加一些 jQuery 来代替:

$(function(){
  $(".navbar-brand").click(function(){
    if ($(".collapse.in")) {
      $(".collapse.in").animate({height: '1px'}, 500, function(){
        $(".collapse.in").removeClass("in");
      });
    }
  });
});