Bootstrap Dropdown對我不起作用

我在OS X上使用Chrome，當我進行普通的香草Bootstrap測試時，它不起作用。Bootstrap Dropdown對我不起作用

我使用常規的v2.3.2文件downloaded from here，我重新創建了一個香草測試。

這是我index.html的樣子：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8" /> 
    <title>Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 

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

    <script src="js/jquery-1.7.2.min.js"></script> 
    <script src="js/bootstrap.js"></script> 

<script> 
    $('.dropdown-toggle').dropdown() 
</script> 

    <!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head> 

<body> 

    <h2>Hello</h2> 

    <p>There should be a dropdown right below this paragraph.</p> 

    <div class="row"> 
     <div class="span12"> 
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 
       <li><a tabindex="-1" href="#">Action</a></li> 
       <li><a tabindex="-1" href="#">Another action</a></li> 
       <li><a tabindex="-1" href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a tabindex="-1" href="#">Separated link</a></li> 
      </ul> 
     </div> 
    </div> 


</body> 
</html>

當我做到這一點，這是我所看到的：

Bootstrap Dropdown Not Working

然而，在源，我看到這個輸出：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8" /> 
    <title>Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 

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

    <script src="js/jquery-1.7.2.min.js"></script> 
    <script src="js/bootstrap.js"></script> 

    <!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head> 

<body> 

    <h2>Hello</h2> 

    <p>There should be a dropdown right below this paragraph.</p> 

    <div class="row"> 
     <div class="span12"> 
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 
       <li><a tabindex="-1" href="#">Action</a></li> 
       <li><a tabindex="-1" href="#">Another action</a></li> 
       <li><a tabindex="-1" href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a tabindex="-1" href="#">Separated link</a></li> 
      </ul> 
     </div> 
    </div> 


</body> 
</html>

爲什麼這不起作用？

來源

2013-10-16 marcamillion

，你不只是「UL」之前忘了「<一類=‘下拉菜單，切換’......」你鏈接的源之後？ – pbenard

此外，UL之前添加的一個標籤，就像寫包括下拉觸發前的無序列表（the <a>）你還忘了換你的菜單與一個具有.dropdown類的元素，例如

<div class="row"> 
    <div class="span12"> 
     <div class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 
      <li><a tabindex="-1" href="#">Action</a></li> 
      <li><a tabindex="-1" href="#">Another action</a></li> 
      <li><a tabindex="-1" href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a tabindex="-1" href="#">Separated link</a></li> 
     </ul> 
     </div> 
    </div> 
</div>

例子：http://jsfiddle.net/BVmUL/73/

來源

2013-10-16 12:49:15 412

他是對的....下拉班不在那裏... – pbenard

這個伎倆。謝謝！ – marcamillion

隨着http://getbootstrap.com/2.3.2/javascript.html#dropdowns

<div class="row"> 
    <div class="span12"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 
      <li><a tabindex="-1" href="#">Action</a></li> 
      <li><a tabindex="-1" href="#">Another action</a></li> 
      <li><a tabindex="-1" href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a tabindex="-1" href="#">Separated link</a></li> 
     </ul> 
    </div> 
</div>

來源

2013-10-16 12:41:46 pbenard

不...不適合我。順便說一句...我的代碼從引導文檔複製str8 - http://getbootstrap.com/2.3.2/components.html#dropdowns – marcamillion

當我按照你的建議，它只是添加一個名爲'Dropdown trigger'的鏈接。 ...但沒有下拉的作品。 – marcamillion

你打電話給js嗎？ $（'。dropdown-toggle'）。dropdown（） – pbenard

Bootstrap Dropdown對我不起作用

回答

相關問題