Bootstrap 菜单中的下拉菜单不起作用答案

【问题标题】：Dropdown in Bootstrap menu not workingBootstrap 菜单中的下拉菜单不起作用
【发布时间】：2016-06-12 21:55:58
【问题描述】：

我怀疑我没有正确实现 javascript 引导文件，因为下拉菜单不起作用。目前，我已将引导程序保存到我的项目文件夹中。我查看了其他工作示例代码（甚至尝试将其复制并粘贴为测试），但菜单不会下拉。

这是我的代码

<head>
  <link rel = "stylesheet" type = "text/css" href = "index.css">
  <link href = "bootstrap-3.3.6-dist/css/bootstrap.css" rel = "stylesheet">
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="index.html">Plethora</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <img id = "menu" src="nav-icon.png"> </a>
          <ul class="dropdown-menu">
           <li><a href="#">Manage Interests </a></li>
           <li><a href="#">Account Settings </a></li>
           <li><a href="#"></a>Email Settings </li>
         </ul>
        </li>
      </ul>
    </div>
  </nav>

  <script type="text/javascript" src="bootstrap-3.3.6-dist/js/bootstrap.js"></script>
</body>`

【问题讨论】：

这个 html 页面的当前文件夹中的文件夹“bootstrap-3.3.6-dist”是否存在？该路径是相对于该页面而非您的网站，因此除非该页面是您的主页，否则可能存在路径问题。

标签： javascript html twitter-bootstrap-3

【解决方案1】：

标记工作正常。在检索 CSS 或 JS 或从 CDN 获取它们时，检查您的浏览器控制台是否有任何 404。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
...
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

此外，您发布的示例代码中缺少 JQuery，这应该在引导 JavaScript 之前。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

控制台示例，FireFox 中的 Firebug，在此处检查您的脚本文件 404：

完整的工作示例，使用 CDN：

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="index.html">Plethora</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <img id = "menu" src="nav-icon.png"> </a>
          <ul class="dropdown-menu">
           <li><a href="#">Manage Interests </a></li>
           <li><a href="#">Account Settings </a></li>
           <li><a href="#"></a>Email Settings </li>
         </ul>
        </li>
      </ul>
    </div>
  </nav>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

_{(runnable JSFiddle，注意3外部资源(Bootstrap CSS and JS and JQuery)}

上面唯一没有的是您的网站 CSS，因此如果其他所有方法都失败，则可能值得尝试不使用它，如果有干扰的话。

【讨论】：

【解决方案2】：

您正在为 CSS 和 JS 文件使用相对路径，而不是绝对路径。

例如，bootstrap-3.3.6-dist/css/bootstrap.css 与您当前所在的页面相关，因此如果您在 example.com/ice/cream 上，则该页面实际上是在尝试为您的 CSS 文件加载 example.com/ice/cream/bootstrap-3.3.6-dist/css/bootstrap.css。如果您的 CSS 使用 /bootstrap-3.3.6-dist/css/bootstrap.css，无论您在哪个页面上，它都会始终从 example.com/bootstrap-3.3.6-dist/css/bootstrap.css 加载。

切换所有 CSS 和 JS 的相对路径，你应该会很好。

编辑：正如另一位海报所指出的，您的页面上似乎也没有 jQuery，这是大多数 Bootstrap 功能工作所必需的。

【讨论】：