Bootstrap 导航栏切换按钮不起作用

Question

当我缩小 window 并单击按钮时，它没有响应。我该如何解决这个问题？

<button type="button" 
        class="navbar-toggle" 
        data-toggle="collapse" 
        data-target=".navbar-collapse">

    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li>
            <a href="">Page 1</a>
        </li>
        <li>
            <a href="">Page 2</a>
        </li>
        <li>
            <a href="">Page 3</a>
        </li>
    </ul>

库是 jQuery 2.1.3 和 bootstrap 3.3.1。

Answer 1

演示：http://jsfiddle.net/u1s62Lj8/1/

您的 HTML 页面中需要 jQuery 和 Boostrap Javascript 文件才能使切换正常工作。（确保在 Bootstrap 之前包含 jQuery。）

<html>
   <head>
       // stylesheets here
       <link rel="stylesheet" href=""/> 
   </head>
   <body>
      //your html code here

      // js scripts here
      // note jquery tag has to go before boostrap
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
   </body>
</html>

Answer 2

您的代码看起来很棒，我唯一看到的是您没有在按钮选择器中包含折叠的 class。 http://www.bootply.com/cpHugxg2f8 注意：需要 JavaScript 插件如果 JavaScript 被禁用并且视口足够窄以至于导航栏折叠，将无法展开导航栏并查看 .navbar-collapse 中的内容。

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

<div class="navbar-wrapper">
      <div class="container">

        <nav class="navbar navbar-inverse navbar-static-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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" href="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                    <li><a href="">Page 1</a>
                    </li>
                    <li><a href="">Page 2</a>
                    </li>
                    <li><a href="">Page 3</a>
                    </li>

              </ul>
            </div>
          </div>
        </nav>

      </div>
    </div>

Answer 3

如果您要更改 ID，那么 Toggle 将无法正常工作我也遇到过同样的问题，我只是更改了

<div class="collapse navbar-collapse" id="defaultNavbar1">
    <ul class="nav navbar-nav">

id="defaultNavbar1" 那么切换就可以了

Answer 4

记得在bootstrap js

之前加载jquery

Answer 5

浪费了几个小时才意识到我的代码中缺少视口元数据。在这里添加以防其他人错过它。

我一添加这个，切换就开始正常工作了。

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 6

因为您必须 jquery 设置才能启用切换按钮的切换功能。所以，你所要做的就是在 bootstrap.css:

之前添加 bootstrap.bundle.js

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Answer 7

我遇到了同样的问题。

我在头文件中以错误的顺序添加了 jQuery 和 bootstrap。

我必须在 bootstrap 之前加载 jQuery，这解决了问题。

Answer 8

在 Bootstrap 中，5 个数据属性现在在带有“bs”的 js 插件中命名空间，因此例如 data-toggle 将不再起作用，您将需要改为使用 data-bs-toggle。

Answer 9

不要加载两次 jquery & bootstrap 库。

删除重复项后，工作正常。

Answer 10

在Bootstrap5中，将data-toggle改为data-bs-toggle， data-target 到 data-bs-target.

请注意，bs 已添加到此版本中的 data 属性。

Bootstrap 导航栏切换按钮不起作用

Bootstrap Navbar toggle button not working

twitter-bootstrap

twitter-bootstrap-3