為什麼 Bootstrap 下拉選單不起作用

問題描述

我無法使自舉下拉選單工作。這是我的 html for nav：

<ul class='nav'>
  <li class='active'>Home</li>
  <li class='dropdown'>
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">asds</a></li>
      <li class="divider"></li>
    </ul>
  </li>
  <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

這裡是指令碼：

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

我究竟做錯了什麼？謝謝你的答案！

最佳解決方案

工作演示：http://codebins.com/bin/4ldqp73

嘗試這個

<ul class='nav'>
  <li class='active'>
    Home
  </li>
  <li>
    <div class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Personal asset loans
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

        <li>
          <a href="#">
            asds
          </a>
        </li>
        <li class="divider"></li>
      </ul>
    </div>   
    </li>
    <li>
      Payday loans
  </li>
  <li>
    About
  </li>
  <li>
    Contact
  </li>
</ul>

次佳解決方案

我有同樣的問題。經過幾個小時的麻煩拍攝發現，

我有

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

代替，

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

希望這有助於某人

第三種解決方案

當我包含 bootstrap.min.js 兩次時，我遇到了同樣的問題。刪除其中一個，它開始工作。

第四種方案

FYI：如果你有 bootstrap.js，你不應該新增 bootstrap-dropdown.js 。

我不確定 bootstrap.min.js 的結果。

第五種方案

對於您的風格，您需要包含引導的 css 檔案，一般在</head> 元素之前

<link href="css/bootstrap.css" rel="stylesheet">

接下來，您需要包含 js 檔案，建議將它們包含在檔案的末尾，一般在</body> 之前，因此頁面載入速度更快。

<script src="js/jquery.js"></script>        
<script src="js/bootstrap.js"></script>

第六種方案

你有 jquery.js 嗎？

此外，將這行程式碼與您的程式碼進行比較：

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

看到這個版本可以正常工作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap dropdown</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">w3resource</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">HTML5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
</body>
</html>

第七種方案

在 body 標籤中新增以下行。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files 
        as needed -->
  <script src="js/bootstrap.min.js"></script>

第八種方案

您必須將此檔案匯入到您的 html 的<head></head> 。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://jsd.admincdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//jsd.admincdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

第九種方案

必須包括引導和 jquery：

<link type="text/css" href="/ProjectName/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>

<link type="text/css" href="/ProjectName/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

注意：jquery-x.x.x.min.js 版本必須是版本 2.x.x！

第十種方案

在頭部嘗試這個

<script src="//googleajax.admincdn.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

參考文獻

Bootstrap dropdown not working

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

為什麼 Bootstrap 下拉選單不起作用