Question

我有一个网站运行bootstrap已经有一段时间了（自2.2以来）。我注意到下拉栏不再起作用后，我最近一直试图修补页面。这是奇怪的，因为它之前已经过测试，大约一年前没有出现任何问题。

在过去的几个小时里，我尝试使用一些较新的bootstrap示例替换部分HTML，但我似乎无法让下拉列表继续工作。

对于调试，我已将问题与最简单的情况隔离在下面的HTML中。

<!DOCTYPE html>
<html lang="en">
  <head>

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

  </head>

  <body>


    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <div class="brand">Test</div>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-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 class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>


            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>



    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>


  </body>
</html>

我非常感谢任何关于我可能遗失的想法。我相信可能导致此问题的Bootstrap版本之间不匹配。但是，我正在尝试重构尽可能少的HTML以使下拉工作，因为我不再熟悉这个旧代码。

最终，我试图在不迁移2.2.2的情况下修复此错误。

Answer 1

我不确定你的javascript文件在哪里，但你需要给li一个“开放”的课程。当li类具有“打开”时，它将显示下拉菜单。所以你可能想要添加一个类似的脚本：

$('.dropdown a').on('click', function () {
    $(this).closest('li').toggleClass('open');
});

或者您可以将click更改为hover。你的选择。

<强>更新

$('html').on('click', function () {
    $('.dropdown.open').removeClass('open');
});
$('.dropdown a').on('click', function (e) {
    e.stopPropagation();
    $(this).closest('li').addClass('open');
});

Twitter Bootstrap Broken Dropdown

1 个答案: