单击时引导折叠导航栏[重复]答案

【问题标题】：Bootstrap collapse navbar on click [duplicate]单击时引导折叠导航栏[重复]
【发布时间】：2014-09-11 17:51:24
【问题描述】：

我正在使用引导导航栏。当用户单击导航栏按钮时，导航栏保持打开状态。单击导航栏按钮时如何折叠导航栏？

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

截图：

这是点击导航栏按钮后的样子（菜单保持打开状态）：

点击导航栏按钮后，我希望它是这样的（返回原始状态）：

【问题讨论】：

导航栏保持打开是什么意思？ Bootstrap 下拉菜单项在您单击列表项或单击下拉菜单外时始终关闭
我没有发现您的代码有任何问题。你能解释一下吗？你能附上你的问题的屏幕截图吗？
@Bir：我已经用截图编辑了我的问题。
您是否正在为移动下拉菜单初始化 jquery 脚本？有时人们会忘记这样做。
你想这样做吗？或者你想知道怎么做吗？

标签： html css twitter-bootstrap-3

【解决方案1】：

对此我有两种解决方案：

第一个选项：data-toggle 属性

您可以将以下属性添加到锚点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>

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

【讨论】：

#sectionA、#sectionB 和#sectionC 中的内容不显示。
现在检查，我已经编辑了我的问题并添加了一个替代选项。在此处检查fiddle.jshell.net/Frondor/sey4wsah/show/#sectionA 第三个链接没有 data-toggle/data-target 属性，并且由于我添加的小 jQuery 脚本，在单击时仍然会折叠菜单。试一试，告诉我它是否适合你

【解决方案2】：

将您的 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> 之前。

【讨论】：

一切就绪。不起作用。
你能提供你的网站链接@Fergoso