切换按钮折叠在 Bootstrap 导航栏中不起作用

Posted 2023-03-24

技术标签:

【中文标题】切换按钮折叠在 Bootstrap 导航栏中不起作用【英文标题】：Toggle button collapse not working in Bootstrap navbar 【发布时间】：2015-01-02 09:50:44 【问题描述】：

导航栏折叠时，我的切换按钮不起作用。我已经检查了几次数据目标，看起来还不错。

这是我的代码：

<div class="navbar navbar-fixed-top navbar-inverse">
 <div class="container">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.html" title="The Title">
    <img style="max-width:100px;" src="images/LOGO-4.png">
  </a>


    <div class="collapse navbar-collapse navbar-collapse">
        <ul class="nav navbar-nav pull-right">
            <li class="active"><a href="#">WORK</a></li>
            <li><a href="#">CONTACT</a></li>

        </ul>
    </div>

有人知道问题出在哪里，我该如何解决？

【问题讨论】：

非常感谢，现在可以了。我认为我的 jquery 链接不正确。在我的“类”元素之后还缺少一个结束 div 标记。 【参考方案1】：

当然，您的切换按钮会根据您的屏幕分辨率而有所不同。尝试以下方式：

    <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="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.html" title="The Title">
    <img style="max-width:100px;" src="images/LOGO-4.png">
  </a>
</div>

    <div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav pull-right">
            <li class="active"><a href="#">WORK</a></li>
            <li><a href="#">CONTACT</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>
</html>

在您的手机上试试这个，看看。然后进入您的css文件并在切换按钮出现时设置屏幕大小的属性。在您更改这些属性之前，桌面上可能不会出现切换按钮，或者将浏览器窗口的大小调整得越来越小，直到出现切换按钮为止。

例如。在我的浏览器窗口中最大化，切换按钮不会出现。但是，如果您将浏览器窗口大小调整一半（或者如果您正在手机上冲浪），它将看起来像这样

要解决此问题，您需要进入 CSS 设置。但这仅在您想更改它的情况下。否则它会正常工作。

【讨论】：

非常感谢，现在可以了。我认为我的 jquery 链接不正确。在我的“类”元素之后还缺少一个结束 div 标记。【参考方案2】：

看到你有正确的库导入，我遇到了同样的问题，我不知道为什么有时它会在不同版本的 Jquery 中出现奇怪的行为

试试这个

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>


<!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <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 class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

【讨论】：

感谢您的帮助，我认为我的 jquery 链接不正确【参考方案3】：

希望它会有所帮助，因为我遇到了同样的问题并通过以下方式解决了它：

<body>

     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
         ...
     </nav>

     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="js/bootstrap.min.js"></script>

</body>

【讨论】：

【参考方案4】：

Default navbar - Requires javascript plugin

如果禁用了 JavaScript 并且视口足够窄以至于导航栏折叠，则无法展开导航栏并查看 .navbar-collapse 中的内容。

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

【讨论】：

【参考方案5】：

每次我们都遇到这个问题“为什么导航栏切换按钮不起作用？”，但这次我们找到了解决方案，特别感谢谷歌浏览器开发团队开发的清晰显示错误。

我们应该在引导 javascript 文件之前包含 jquery 库文件。

【讨论】：

谢谢，确实是我的问题。

以上是关于切换按钮折叠在 Bootstrap 导航栏中不起作用的主要内容，如果未能解决你的问题，请参考以下文章