点击时隐藏 Twitter Bootstrap 导航折叠

Question

这不是子菜单下拉，类别是图中的li类：

通过从响应式菜单中选择一个类别（模板只是 一页），我想在点击时自动隐藏导航折叠。 也可以作为导航使用，因为模板只有一个 页。我寻求一个不影响它的解决方案，这里是 HTML 代码 菜单：

    <!-- NAVBAR
  ================================================== -->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Carousel Demo</a>
      <div class="nav-collapse">
        <ul class="nav" >
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
          <!-- dropdown -->
        </ul>
        <!-- /.nav -->
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.navbar-inner -->
</div>
<!-- /.navbar -->

Answer 1

试试这个：

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click(); //bootstrap 3.x by Richard
    $('.navbar-toggler').click(); //bootstrap 4.x
});

Answer 2

这隐藏了导航折叠而不是对其进行动画处理，但与上述答案的概念相同

JS：

$('.nav a').on('click', function () {
    $("#funk").toggleClass('in collapse');
});

HTML：

<div class="navbar-collapse" id="funk">

我更喜欢在单页网站上使用它，因为我使用了已经动画的 localScroll.js。

Answer 3

$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $('.navbar-toggle').trigger( "click" );
        }
    });
});

Answer 4

$(function() {
    $('.nav a').on('click touchstart', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $(".navbar-toggle").trigger( "click" );
        }
    });
});

// 注意我为移动触摸添加了“touchstart”。 touchstart/end 没有延迟

Answer 5

我只是在每个链接上复制btn-navbar (data-toggle="collapse" data-target=".nav-collapse.in") 的 2 个属性，如下所示：

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

在Bootstrap 4 Navbar 中，in 已更改为show，因此语法为：

data-toggle="collapse" data-target=".navbar-collapse.show"