下拉菜单不起作用，其他一切都起作用答案

【问题标题】：Drop down menu doesn't work, everything else does下拉菜单不起作用，其他一切都起作用
【发布时间】：2013-07-21 12:47:40
【问题描述】：

我正在引导我迈出第一步。我基本上是自己重新创建了一个模板。它工作正常，但下拉菜单（在导航栏中）不起作用。

我很困惑，因为：

1) 转换到移动模式工作正常。它的导航菜单也可以正常工作。

2) 我已将下载的每个文件都包含在内，我认为它的行为就像没有包含文件一样。

3) 因为我认为我做错了什么，所以我直接从网站上复制了这部分 HTML，但仍然无法正常工作。

这是全部源代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
       <link href="css/bootstrap.css" rel="stylesheet">
       <link href="css/bootstrap.min.css" rel="stylesheet">     
      <script src="../assets/js/html5shiv.js"></script>     

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>

     <div class="navbar navbar-fixed-top asd">
      <div class="navbar-inner asd">
        <div class="container asd">
          <button type="button" 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>
          </button>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav asd">
              <li ><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
             <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="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">

      <h1>Title</h1>
      <p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>  

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

您需要在文件中包含 bootstrap-dropdown.js：http://twitter.github.io/bootstrap/components.html#dropdowns

将此添加到底部的脚本中（在包含 jquery 之后）：

 <script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-dropdown.js"></script>

编辑：重要

问题是您同时包含 bootstrap.js 和 bootstrap.min.js。在这里遇到了类似的问题（这是在哪里我最初发现它）： Unable to use bootstrap.min.js and bootstrap-dropdown.js at the same time

【讨论】：

嗯...在我的下载中，我只有 2 个文件：bootstrap.js 和 bootstrap.min.js。从我读过的内容来看，它们应该包含所有模块的功能。下拉模块是独立的吗？
不应该，尝试删除 bootstrap.js 或 bootstrap.min.js。我相信这是问题所在，以前没有看到。所以只需包含 bootstrap.min.js 并删除它上面的脚本标签。
谢谢您，先生，这解决了我的问题。如果您有空闲时间，您介意告诉我为什么包含这两个文件时系统会中断吗？
我相信它在下拉菜单上运行脚本两次（一次用于 bootstrap.js，一次用于 bootstrap.min.js），这将在 bootsrtap.js 函数运行后将其打开，并且然后在 min.js 文件运行时立即将其关闭。另外，我发现了这个：stackoverflow.com/questions/4891278/…

【解决方案2】：

删除重复的link 和script 行后（您不必同时导入普通文件和最小化文件，例如js/bootstrap.js 和js/bootstrap.min.js），I've tested your file 我找不到错误。

所以我建议您检查所有路径，因为缺少某些东西（可能是 bootstrap.js）：使用 Chrome 控制台或 FireBug 查看您的环境中没有加载哪些资源，并尝试将相对路径转换为绝对路径（如/js/bootstrap.min.js) 尽可能避免常见的文件导入陷阱。

P.S：我假设您已经获得了 Bootstrap 的完整最新稳定版本，而不是自定义版本。

【讨论】：