Question

切换按钮无法显示折叠的元素，我不知道为什么。调整窗口大小时，会显示切换按钮但按下时没有任何反应。这是我第一次使用Bootstrap，所以我可能犯了一些非常明显和荒谬的错误。任何帮助表示赞赏。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
  <div class="page">

    <div class="nav navbar-default">
      <div class="container"></div>

      <li>
        <a class="logo" href="#1"></a>
      </li>
      <li>
        <a class="cart" href="#7"></a>
      </li>

      <button class="navbar-toggle" data-toggle="dropdown" data-target="navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="collapse navbar-collapse navHeaderCollapse">

        <ul>

          <li class="products"><a href="#2">Products</a>
          </li>
          <li class="store"><a href="#3">Store</a>
          </li>
          <li class="about"><a href="#4">About Us</a>
          </li>
          <li class="discover"><a href="#5">Discover</a>
          </li>
          <li class="support"><a href="#6">Support</a>
          </li>

        </ul>

      </div>

    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

您至少遇到一些问题：请参阅Navbar的文档。

data-toggle="dropdown"应为data-toggle="collapse"

data-target="navHeaderCollapse"应为data-target=".navHeaderCollapse"

修复这两个问题应该允许菜单打开和关闭。您可能希望利用默认结构来避免（或至少知道）在navbar-header类以及.nav类中包含切换按钮的其他问题。菜单列表项上的.navbar-nav个类。此外，container目前尚未执行任何操作，它应围绕导航栏标题/列表项。

工作示例：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="boostrap-iso">
  <div class="page">

    <div class="nav navbar-default">
      <div class="container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a href="#" class="navbar-brand">LOGO</a>
          <a href="#" class="navbar-brand"><span class="glyphicon glyphicon-shopping-cart"></span></a>
        </div>

        <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav">
            <li class="products"><a href="#2">Products</a>
            </li>
            <li class="store"><a href="#3">Store</a>
            </li>
            <li class="about"><a href="#4">About Us</a>
            </li>
            <li class="discover"><a href="#5">Discover</a>
            </li>
            <li class="support"><a href="#6">Support</a>
            </li>
          </ul>
        </div>

      </div>
    </div>

  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

Answer 2

导航栏切换按钮不起作用的原因是您错过了3件事。

您需要将data-toggle="dropdown"更改为data-toggle="collapse"。
您需要将data-target="navHeaderCollapse"更改为data-target="#navHeaderCollapse"。
您需要使用折叠css类将id="navHeaderCollapse"添加到div。

一旦你拥有了所有这些元素，切换就会起作用。还有一些其他的东西丢失了，例如navbar-header div，您的容器在错误的位置关闭，而第一个<li>元素不在<ul>标记内。

以下是您的代码工作的jsfiddle：https://jsfiddle.net/4syh8nth/9/

Answer 3

尝试使用#属性中的data-target符号来引用使用此ID的元素。

<button class="navbar-toggle" data-toggle="dropdown" data-target="#navHeaderCollapse">

并为您的.navbar-collapse元素添加ID属性

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

Refer to the docs

响应式导航栏要求折叠插件包含在您的Bootstrap
版本中

Collapse plugin

Answer 4

你可以像我通过bootstrap那样制作它。你的代码中的一些类我没有识别它包含的引导程序。感谢

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body > <nav class="navbar navbar-inverse"> <div class="container-fluid">

<div class="collapse navbar-collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="products"><a href="#2">Products</a></li> <li class="store"><a href="#3">Store</a></li> <li class="about"><a href="#4">About Us</a></li> <li class="discover"><a href="#5">Discover</a></li> <li class="support"><a href="#6">Support</a></li> </ul> </div> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body>

Answer 5

我遇到了同样的问题。

我在head部分使用了数据切换cdn，它适用于我的情况。有关详细信息，请查看link。

在HTML的主要部分使用https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css。

检查您是否使用过所有相关的CDN。

Bootstrap切换按钮不起作用

5 个答案: