logo标签列表

Bootstrap 切换按钮无法工作。

javascriptjquerytwitter-bootstrapdrop-down-menutoggle
5

切换按钮无法展开折叠元素，我不知道原因。调整窗口大小后，切换按钮会显示，但按下后没有任何反应。这是我第一次使用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>

您可以在编辑器中使用<>按钮创建代码片段以提供一个最小可复现示例（MCVE）。如果您创建了代码片段，请单击TIDY。 - mplungjan
2
你的HTML无效，不能没有列表而有LI元素。 - adeneo
好的，修复了，但仍然无法正常工作。 - Lord Eww Lel
5个回答
4
您至少存在一些问题：请参阅导航栏的文档。 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>

1
你的导航栏切换按钮无法工作的原因是你忽略了三个要素：

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

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

  3. 你需要在具有折叠 CSS 类的 div 中添加 id="navHeaderCollapse"。

一旦你拥有了所有这些元素，切换就会起作用。还有一些其他缺失的东西，比如 navbar-header div，你的容器关闭位置不正确以及第一个 <li> 元素不在 <ul> 标签内。
这里有一个 jsfiddle，展示了你的代码正常工作: https://jsfiddle.net/4syh8nth/9/
0
你应该写出代码中回答问题的关键部分，而不仅仅提供链接。链接可能会失效。请阅读有关如何回答问题的文档。 - alex
谢谢您的建议。我已经进行了更正。这是我的第一个答案。由于我是新手，不熟悉格式。 我将来会写清晰明了的答案。 - chandana
0
尝试在 data-target 属性中使用 # 符号来引用使用此 ID 的元素。
<button class="navbar-toggle" data-toggle="dropdown" data-target="#navHeaderCollapse">

并在您的.navbar-collapse元素中添加一个ID属性

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

请查看文档

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

折叠插件

你是否已经加载了Bootstrap的JavaScript？ - Robiseb
是的，我有。感谢您的帮助，我仍在寻找解决方案。 - Lord Eww Lel
0

你可以像我一样使用Bootstrap来实现这个。在你的代码中有些类我不确定是否包含在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>
非常感谢您的帮助。不幸的是，这个解决方案也没有起作用。 - Lord Eww Lel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接