单击时隐藏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

无需添加重复的代码，更为优雅的方法是将data-toggle="collapse"and data-target=".nav-collapse"属性简单地应用于导航本身：<nav class="nav-collapse" data-toggle="collapse" data-target=".nav-collapse">&nbsp; <ul class="nav">&nbsp; &nbsp; <li class="active"><a href="#home">Home</a></li>&nbsp; &nbsp; <li><a href="#about">About</a></li>&nbsp; &nbsp; <li><a href="#portfolio">Portfolio</a></li>&nbsp; &nbsp; <li><a href="#services">Services</a></li>&nbsp; &nbsp; <li><a href="#contact">Contact</a></li>&nbsp; </ul></nav>超级干净，无需JavaScript。只要您的nav a元素具有足够的填充空间来容纳粗壮的手指，并且效果不佳，并且不会阻止e.stopPropagation()用户单击nav a项目时通过单击事件冒泡，效果就很好。