Question

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

我很困惑，因为：

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>

Answer 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

Answer 2

删除重复的link和script行后（您不必导入普通文件和最小化文件，例如js/bootstrap.js和js/bootstrap.min.js），{{3}我无法找到错误。

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

P.S：我认为你已经拥有完整的Bootstrap稳定版本而不是自定义版本。

下拉菜单不起作用，其他一切都有效

2 个答案: