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

  <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>

  </ul>

</nav>

超级干净，无需JavaScript。只要您的nav a元素具有足够的填充空间来容纳粗壮的手指，并且效果不佳，并且不会阻止e.stopPropagation()用户单击nav a项目时通过单击事件冒泡，效果就很好。