引導菜單中的下拉菜單不起作用

我懷疑我沒有正確實現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

引導菜單中的下拉菜單不起作用

回答

相關問題