Question

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

这是我的代码

<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>`

Answer 1

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

com.yourdomain.yourprojectname

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

<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>

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

完整工作示例，使用CDN：

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

_{（runnable JSFiddle，请注意 3 外部资源（Bootstrap CSS和JS和JQuery）}

上面唯一没有的是你的网站CSS，所以如果没有那个就可能值得尝试，如果其他所有方法都失败，就会出现干扰。

Answer 2

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

例如，2016-06-12 17:22:46.134672: [debug] Run process: C:\...\stack\setup-exe-cache\x86_64-windows\setup-Simple-Cabal-1.22.5.0-ghc-7.10.3.exe --builddir=.stack-work\dist\2672c1f3 configure --with-ghc=C:\...\stack\x86_64-windows\ghc-7.10.3\bin\ghc.exe --with-ghc-pkg=C:\...\stack\x86_64-windows\ghc-7.10.3\bin\ghc-pkg.exe --user --package-db=clear --package-db=global --package-db=C:\...\stack\snapshots\ee4b7647\pkgdb --package-db=C:\...\mp1-haskell\.stack-work\install\5c0a1b09\pkgdb --libdir=C:\...\mp1-haskell\.stack-work\install\5c0a1b09\lib --bindir=C:\...\mp1-haskell\.stack-work\install\5c0a1b09\bin --datadir=C:\...\assignments\mp1-haskell\.stack-work\install\5c0a1b09\share --libexecdir=C:\...\mp1-haskell\.stack-work\install\5c0a1b09\libexec --sysconfdir=C:\...\mp1-haskell\.stack-work\install\5c0a1b09\etc --docdir=C:\...\mp1-haskell\.stack-work\install\5c0a1b09\doc\mp1-haskell-0.1.0.0 --htmldir=C:\...\mp1-haskell\.stack-work\install\5c0a1b09\doc\mp1-haskell-0.1.0.0 --haddockdir=C:\...\mp1-haskell\.stack-work\install\5c0a1b09\doc\mp1-haskell-0.1.0.0 --dependency=base=base-4.8.2.0-14035a44a8b95c6832da6dae1420f59e --extra-include-dirs=C:\...\stack\x86_64-windows\msys2-20150512\mingw64\include --extra-lib-dirs=C:\...\stack\x86_64-windows\msys2-20150512\mingw64\lib --enable-tests --enable-benchmarks @(stack_9kewhubnl5WIl89fhd1ea2:System.Process.Read src/System\Process\Read.hs:283:3)与您所在的任何页面相关，因此如果您在bootstrap-3.3.6-dist/css/bootstrap.css上，该页面实际上是在尝试加载example.com/ice/cream你的CSS文件。如果您对CSS使用example.com/ice/cream/bootstrap-3.3.6-dist/css/bootstrap.css，则无论您使用哪个网页，它都会始终从/bootstrap-3.3.6-dist/css/bootstrap.css加载。

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

编辑：正如另一张海报指出的那样，你也似乎没有在页面上使用jQuery，这是大多数Bootstrap功能都可以使用的。

Bootstrap菜单中的下拉列表无法正常工作

2 个答案: