7

我开始尝试使用 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>
4

3 回答 3

4

I think that you have a typo in the way you are including the bootstrap JS. Have a look at <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script> and notice that you have .jss for the extension and also... the reason the link starts with // (double slash) is because it's missing the http: or https: protocol and they leave it off so you can add it.

You also forgot to include jQuery (it's a must for bootstrap's JS to work) and make sure you include it above the bootstrap JS or it won't work.

Here's a fiddle of the bare bone dropdown working with everything included.

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>
于 2013-07-25T04:59:54.933 回答
1

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

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

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

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

于 2015-02-28T14:24:09.803 回答
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

于 2013-07-25T05:00:43.567 回答