升级后,Bootstrap Dropdown不起作用

时间:2014-11-06 10:43:27

标签: javascript html5 twitter-bootstrap drop-down-menu

我试图将我的bootstrap版本从3.1.0更新到当前的最新版本3.3.0。 但是我在升级之后注意到我的下拉菜单已经不能正常工作了。 出于某种原因,javascript不会使用.dropdown-toggle css类来拾取元素。

但是当我深入了解chrome javascript控制台并执行以下命令时:

$('.dropdown-toggle').dropdown()

我注意到下拉菜单确实有效。我比较了这个命令之前和之后的菜单的html,它保持不变。

我还查看了bootstrap的发行说明,可以找到有关下拉菜单的任何重大更改。这是我的代码的一个示例:

<ul>
  <li class="dropdown">
    <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#">Customers</a>
  </li>
</ul>
<ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
  <li>
    <a href="/company">Overview</a>
  </li>
  <li>
    <a href="/company/customer_form">Customer form</a>
  </li>
</ul>

有人得到小费吗?

1 个答案:

答案 0 :(得分:1)

工作得很好,你唯一要做的就是最新使用Jquery 这是工作小提琴

http://jsfiddle.net/2qWy8/22/

<ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</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><a href="#">Separated link</a></li>
</ul>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>