Bootstrap导航栏切换按钮无法正常工作

Question

Bootstrap导航栏切换按钮无法正常工作

62

当我缩小窗口并单击按钮时，它没有反应。我该怎么解决？

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

- Nikasv

17

你是否包含了Bootstrap的JavaScript文件？同时确保它被包含在页面底部。 - HaukurHaf

添加 jQuery 对我有效。 - Shark Deng

@HaukurHaf - 请将其作为答案发布。对我非常有效。谢谢！ - Web Developer

顺便说一下，在Bootstrap 5中，类应该是“navbar-toggler”而不是“navbar-toggle”。 - Alexandros Kourtis

显示剩余9条评论

10个回答

52

示例: http://jsfiddle.net/u1s62Lj8/1/

要使切换操作生效，您需要在HTML页面中包含jQuery和Bootstrap 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>

- indubitablee

3

代朋友发布。别忘了检查你是否像我的朋友那样在几天前禁用了javascript开发工具。关闭开发工具，看看是否正常！呃！ - billythekid

2

我有一个母版页，jQuery库的引用包含在子页面中而不是母版页中。你的答案帮助我找到了问题所在，谢谢！ - Jamshaid K.

这个没有起作用。 - daddycardona

36

你的代码看起来很好，唯一的问题是你没有在按钮选择器中包含collapsed类。 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>

- Dee

3

这很有效，并且解释得非常好。非常感谢你。 - Nikasv

1

它没有帮助我。 - Web Developer

32

在Bootstrap 5中，将data-toggle更改为data-bs-toggle，将data-target更改为data-bs-target。

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

- Spidy

9

请记得在加载bootstrap js前先加载jquery。

- Alberto

3

因为您需要设置 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>

- baraa yusri

3

浪费了几个小时才意识到我的代码中缺少viewport meta标签。这里添加一下，以防其他人也会遗漏。

当我添加这个标签后，切换功能就正常工作了。

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

- bhaskarc

2

不要重复加载jquery和bootstrap库。删除重复后，可以正常工作。

- Brian Sanchez

0

我遇到了同样的问题。

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

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

- Jason Braithwaite

-2

如果您更改了ID，则切换将无法工作，我也遇到了同样的问题，我只是进行了更改。

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

id="defaultNavbar1" 然后切换是有效的

- Syntaxx Errorr

他有点对...如果你改变了ID，你还需要在按钮中改变data-target=。我曾经删除过ID，认为它是无用的... - the_nuts

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Crasher · Accepted Answer

64

在Bootstrap 5中，数据属性现在在js插件中使用“bs”进行命名空间分隔，例如data-toggle将不再起作用，您需要改用data-bs-toggle。

- Crasher

救命稻草 :) 谢谢 - SachinKRaj

是的，这就是我的问题。我从5.0版本切换回4.6版本后，它开始正常工作了。 - Kara Kartal

哦，老兄，谢谢:) 现在这对我也起作用了。 - Zsombi

2

自从Bootstrap 5以来，这应该作为第一个答案显示。谢谢！ - MikhailRatner

当我迁移到BS 5时，这个解决了我的问题！太容易被忽视了... - Erik

显示剩余3条评论