单击Bootstrap折叠导航栏

时间:2014-09-11 17:51:24

标签: html css twitter-bootstrap-3

我使用bootstraps导航栏。当用户点击导航栏按钮时,导航栏保持打开状态。如何在单击导航栏按钮时折叠导航栏?

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a data-toggle="tab" href="#sectionA">Page1</a></li>
        <li><a data-toggle="tab" href="#sectionB">Page2</a></li>
        <li><a data-toggle="tab" href="#sectionC">Page3</a></li>
       </ul>
    </div>
  </div>
</nav>

屏幕截图:

点击导航栏按钮(菜单保持打开状态)后的情况如下:

enter image description here

点击导航栏按钮(返回原始状态)后,这就是我想要的样子: enter image description here

2 个答案:

答案 0 :(得分:9)

我有两个解决方案:

第一个选项:数据切换属性

您可以将以下属性添加到锚点data-toggle="collapse" data-target=".in" 这样,当选择菜单项时,菜单将崩溃。

这是你的代码:

    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand">Brand</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
<!-- Add data-toggle="collapse" data-target=".in" to <a> elements-->
<!-- This way they will collapse the responsive menu when clicked -->
            <li class="active"><a data-toggle="collapse" data-target=".in" href="#sectionA">Page1</a></li>
            <li><a data-toggle="collapse" data-target=".in" href="#sectionB">Page2</a></li>
            <li><a data-toggle="collapse" data-target=".in" href="#sectionC">Page3</a></li>
           </ul>
        </div>
      </div>
    </nav>

示例:http://jsfiddle.net/Frondor/sey4wsah/


第二个备选方案:使用jQuery (最佳方法)

如果第一个例子不适合你,你可以在jQuery和Bootstrap.js库调用下面添加几行jQuery,不要忘记jquery.js和Bootstrap.js API:

<script src="/js/jquery.min.js"> <!--suppose these are the same paths you're using for it -->
<script src="/js/bootstrap.min.js">

以下:

<script>
$(document).ready(function () {
    $("nav").find("li").on("click", "a", function () {
        $('.navbar-collapse.in').collapse('hide');
    });
});
</script>

这将匹配响应式菜单上的每个链接,并在点击事件中折叠所述菜单。 试一试

答案 1 :(得分:0)

将您的bootstrap.min.js文件保存到js文件夹中,然后在<script src="js/bootstrap.min.js"></script>之前添加此</body>,并将bootstrap.min.css保存到css文件夹中,然后在<link rel="stylesheet" href="css/bootstrap.min.css">之前添加</head> 1}}。