Bootstrap菜單中的下拉菜單不起作用

Question

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

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

_{（可運行的JSFiddle ，請注意3個外部資源（Bootstrap CSS和JS以及JQuery）}

上面沒有的唯一東西是您的站點CSS，因此如果沒有其他可能失敗的情況，最好在沒有偶然干擾的情況下進行嘗試。

Answer 2

您正在使用CSS和JS文件的相對路徑，而不是絕對路徑。

例如， bootstrap-3.3.6-dist/css/bootstrap.css與您所在的頁面有關，因此，如果您位於example.com/ice/cream ，則該頁面實際上是在嘗試加載example.com/ice/cream/bootstrap-3.3.6-dist/css/bootstrap.css作為CSS文件。 如果您將/bootstrap-3.3.6-dist/css/bootstrap.css用於CSS，則無論您位於哪個頁面，它都將始終從example.com/bootstrap-3.3.6-dist/css/bootstrap.css加載。上。

切換所有CSS和JS的相對路徑，這是個不錯的選擇。

編輯：正如另一位海報指出的那樣，您在頁面上似乎也沒有jQuery，這是大多數Bootstrap功能正常運行所必需的。

Bootstrap菜單中的下拉菜單不起作用

問題描述

2 個解決方案

解決方案1
0 2016-06-12 22:03:07

解決方案2
0 2016-06-12 22:31:16

Bootstrap菜單中的下拉菜單不起作用

問題描述

2 個解決方案

解決方案1 0 2016-06-12 22:03:07

解決方案2 0 2016-06-12 22:31:16

解決方案1
0 2016-06-12 22:03:07

解決方案2
0 2016-06-12 22:31:16