logo标签列表

Bootstrap 下拉菜单无法工作。

csstwitter-bootstrapdrop-down-menu
8
我开始尝试使用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>
3个回答
4
我认为您在引用Bootstrap 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之前，否则它将无法工作。
这是一个包括所有内容的基本下拉菜单的fiddle。 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>
啊，那个JSS的东西就是它了。我早就看到了，但由于它是从cssdeck的添加库功能自动生成的，所以我认为这是有意的。看来他们犯了一个错误！谢谢！！ - calyxofheld
没错，那肯定会毁了你的一天。很高兴它对你起作用了。 - sulfureous
1

我在Bootstrap 3.3.2中遇到了相同的问题，下拉菜单无法工作。

我包含了一个旧版本的jquery（1.3），它不适用于bootstrap。当我查看Firefox Webdeveloper Tools（F12）中的控制台和启用JS选项时，我得到了这个提示。

"错误：Bootstrap的JavaScript需要jQuery版本1.9.1或更高版本"

删除这个jquery包含就解决了我的问题。

0

这里是可用的演示

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 库 和 bootstrap-dropdown.js

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接