引导切换按钮不起作用

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>

原文由 Lord Eww Lel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您至少有几个问题：请参阅 Navbar 的文档。

data-toggle="dropdown" 应该是 data-toggle="collapse"

data-target="navHeaderCollapse" 应该是 data-target=".navHeaderCollapse"

解决这两个问题应该允许菜单打开和关闭。您可能希望使用默认结构来避免（或至少注意）将切换按钮实时包含在 navbar-header 类以及 .nav & .navbar-nav 中的其他问题 --- 菜单列表项上的类。此外，您的 container 目前没有做任何事情，它应该围绕导航栏标题/列表项。

工作示例：

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

原文由 vanburen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

1. 您需要将 data-toggle="dropdown" 更改为 data-toggle="collapse" 。

2. 您需要将 data-target="navHeaderCollapse" 更改为 data-target="#navHeaderCollapse" 。

3. 您需要将 id="navHeaderCollapse" 添加到具有折叠 css 类的 div。

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

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

原文由 Asher 发布，翻译遵循 CC BY-SA 3.0 许可协议