为什么 Bootstrap 下拉菜单不起作用

问题描述

我无法使自举下拉菜单工作。这是我的 html for nav：

<ul class='nav'>
  <li class='active'>Home</li>
  <li class='dropdown'>
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">asds</a></li>
      <li class="divider"></li>
    </ul>
  </li>
  <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

这里是脚本：

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

我究竟做错了什么？谢谢你的答案！

最佳解决方案

工作演示：http://codebins.com/bin/4ldqp73

尝试这个

<ul class='nav'>
  <li class='active'>
    Home
  </li>
  <li>
    <div class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Personal asset loans
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

        <li>
          <a href="#">
            asds
          </a>
        </li>
        <li class="divider"></li>
      </ul>
    </div>   
    </li>
    <li>
      Payday loans
  </li>
  <li>
    About
  </li>
  <li>
    Contact
  </li>
</ul>

次佳解决方案

我有同样的问题。经过几个小时的麻烦拍摄发现，

我有

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

代替，

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

希望这有助于某人

第三种解决方案

当我包含 bootstrap.min.js 两次时，我遇到了同样的问题。删除其中一个，它开始工作。

第四种方案

FYI：如果你有 bootstrap.js，你不应该添加 bootstrap-dropdown.js 。

我不确定 bootstrap.min.js 的结果。

第五种方案

对于您的风格，您需要包含引导的 css 文件，一般在</head> 元素之前

<link href="css/bootstrap.css" rel="stylesheet">

接下来，您需要包含 js 文件，建议将它们包含在文档的末尾，一般在</body> 之前，因此页面加载速度更快。

<script src="js/jquery.js"></script>        
<script src="js/bootstrap.js"></script>

第六种方案

你有 jquery.js 吗？

此外，将这行代码与您的代码进行比较：

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

看到这个版本可以正常工作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap dropdown</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">w3resource</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">HTML5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
</body>
</html>

第七种方案

在 body 标签中添加以下行。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files 
        as needed -->
  <script src="js/bootstrap.min.js"></script>

第八种方案

您必须将此文件导入到您的 html 的<head></head> 。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

第九种方案

必须包括引导和 jquery：

<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>

<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

注意：jquery-x.x.x.min.js 版本必须是版本 2.x.x！

第十种方案

在头部尝试这个

<script src="//googleajax.admincdn.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

参考文献

Bootstrap dropdown not working

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

为什么 Bootstrap 下拉菜单不起作用