引导下拉菜单不起作用

Posted 2023-03-06

【中文标题】引导下拉菜单不起作用

【英文标题】：Bootstrap dropdown does not work

【发布时间】：2013-07-24 19:44:43

【问题描述】：

我开始尝试使用 Bootstrap，但我无法让 js 下拉功能按照其文档中的方式工作。

我使用的代码来自他们自己网站上的示例下拉节点之一。 data-toggle="dropdown" 用于链接，一切都如他们所说的那样。任何有新鲜眼睛和更多经验的人都知道发生了什么？ http://cssdeck.com/labs/pipw6ahd

<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">


<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
  <ul class="nav" role="navigation">
    <li class="dropdown">
      <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
    </li>

    <li class="dropdown open">
      <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
  <ul class="nav pull-right">
    <li id="fat-menu" class="dropdown">
      <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div>
</div>
</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script>

【参考方案1】：

我认为您在包含引导 JS 的方式上有一个错字。看看<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script> 并注意你有.jss 作为扩展名，而且......链接以//（双斜杠）开头的原因是因为它缺少http: 或https: 协议，它们将其关闭，以便您可以添加它。

你也忘了包含 jQuery（这是 bootstrap 的 JS 工作所必需的），并确保你将它包含在 bootstrap JS 之上，否则它将无法工作。

这是一个简单的下拉菜单，包含所有内容。

The Fiddle

HTML

<div class="dropdown">
  <a class="dropdown-toggle btn" data-toggle="dropdown" href="#" >Dropdown trigger</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li>Item One</li>
      <li>Item Two</li>
    </ul>
</div>

【讨论】：

Aaaand 那个 jss 东西原来是它。我很早就看到了它，但由于它是从 cssdeck 添加库的功能自动生成的，我认为这是故意的。看起来他们犯了一个错误！谢谢！！

是的，这肯定会毁了你的一天。很高兴它对你有用。

【参考方案2】：

这里正在工作demo

html

 <div id="navbar-example" class="navbar navbar-static">
              <div class="navbar-inner">
                <div class="container" style="width: auto;">
                  <a class="brand" href="#">Project Name</a>
                  <ul class="nav" role="navigation">
                    <li class="dropdown">
                      <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                      </ul>
                    </li>
                    <li class="dropdown">
                      <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                  <ul class="nav pull-right">
                    <li id="fat-menu" class="dropdown">
                      <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

包括 css bootstrap.css

包括 js:: Jquery Library 和 bootstrap-dropdown.js

【参考方案3】：

我在 Bootstrap 3.3.2 中遇到了同样的问题，下拉菜单不起作用。

我包含了一个旧版本的 jquery (1.3)，它不能与引导程序一起使用，我在查看 Firefox Webdeveloper Tools (F12) 中的控制台和 JS 选项时得到了这个提示。

“错误：Bootstrap 的 javascript 需要 jQuery 1.9.1 或更高版本”

删除此 jquery 包含解决了我的问题。