Bootstrap 切换按钮不起作用答案

【问题标题】：Bootstrap toggle button is not workingBootstrap 切换按钮不起作用
【发布时间】：2017-03-19 19:24:32
【问题描述】：

切换按钮无法显示折叠的元素，我不知道为什么。调整窗口大小时，会显示切换按钮，但按下时，什么也没有发生。这是我第一次使用 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>

【问题讨论】：

您可以使用编辑器中的<> 按钮创建一个sn-p，以提供minimal reproducible example。如果您确实创建了一个 sn-p，请单击 TIDY
你有无效的 HTML，你不能有没有列表的 LI 元素，
好的，修复它仍然不起作用。

标签： javascript jquery twitter-bootstrap drop-down-menu toggle

【解决方案1】：

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

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

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

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

工作示例：

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

【讨论】：

【解决方案2】：

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

您需要将data-toggle="dropdown" 更改为data-toggle="collapse"。
您需要将data-target="navHeaderCollapse" 更改为data-target="#navHeaderCollapse"。
你需要将id="navHeaderCollapse"添加到带有折叠css类的div中。

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

这是一个 jsfiddle，您的代码可以正常工作：https://jsfiddle.net/4syh8nth/9/

【讨论】：

【解决方案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

【讨论】：

你的引导 javascript 加载了吗？
是的，我有。感谢您的帮助，我仍在寻找解决方案。

【解决方案4】：

你可以像我通过引导程序那样做这个。您的代码中的某些类我不认识它的引导程序是否包含。谢谢

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

【讨论】：

感谢您的帮助。不幸的是，这个解决方案也不起作用。

【解决方案5】：

我也遇到过同样的问题。

我在 head 部分使用了 data-toggle cdn，它适用于我的情况。更多信息请查看link。

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

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

【讨论】：

您应该写出回答问题的代码的关键部分，而不是简单地提供链接。链接可能会过期。请阅读有关如何回答问题的文档。
感谢您的建议。我已经纠正了。这是我的第一个答案。因为我是这个网站的新手，所以我不知道格式。以后我会写清楚的答案。