引导菜单中的下拉菜单不起作用

我怀疑我没有正确实现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>`

来源

2016-06-12 Marina Tassi

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

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

<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，请检查您的脚本文件在这里404ing：

全部工作实例，使用的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，请注意外部资源（引导CSS和JS和JQuery）}

唯一没有在上面的，是你的网站的CSS，所以它可能是值得尝试的，而不该在关闭的机会，一些有干扰，如果一切都失败了。

来源

2016-06-12 22:03:07 NikolaiDante

您正在使用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的相对路径，你应该很好。

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

来源

2016-06-12 22:31:16 michael

引导菜单中的下拉菜单不起作用

回答

相关问题