Twitter Bootstrap下拉不起作用

任何想法，爲什麼這個Twitter Bootstrap下拉不起作用？Twitter Bootstrap下拉不起作用

的Javascript頭：

<script src="/assets/js/bootstrap.js" type="text/javascript"></script>

菜單HTML：

   <li class="dropdown"> 
       <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here... 
        <b class="caret"></b> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a href="/app/1">Item A</a></li> 
        <li><a href="/app/2">Item B</a></li> 
        <li><a href="/app/3">Item C</a></li> 
       </ul> 
       </li>

來源

2012-09-21 Snowcrash

你的js加載的順序是？ jQuery始終第一，bootstrap第二。 –

如果你有bootstrap.js（不是bootstrap.min.js），你應該*不*也添加bootstrap-dropdown.js。這對我來說是訣竅。 – Fahrenheit

嘗試添加到dom就緒：$（'。dropdown-toggle'）。dropdown（）; – user956584

把下拉類上被包裹li而不是在li本身一個div。像這樣...

 <div class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
     ... 
     </ul> 
     </div>

這個例子是從bootstrap site

您的代碼應該是這樣的......

<!DOCTYPE html > 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
    <script type="text/javascript" src="../plugins/js/bootstrap-dropdown.js"></script> 
    <link href="../theme/bootstrap.css" rel=stylesheet type="text/css"> 

    </head> 
    <div class="dropdown"> 
     <ul class="dropdown"> 
     <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here... 
      <b class="caret"></b> 
     </a> 
      <ul class="dropdown-menu"> 
       <li><a href="/app/1">Item A</a></li> 
       <li><a href="/app/2">Item B</a></li> 
       <li><a href="/app/3">Item C</a></li> 
      </ul> 
     </ul> 
    </div>

我試圖使一個嵌套列表，但是事實並非如此與bootstrap一起工作。我認爲它會讓兩個下拉列表混淆。

來源

2012-09-21 17:46:18 noel

我試過了，看起來很糟糕。另外它不起作用。檢查他們的網站，這不是他們如何做。例如。看看這裏：http：//twitter.github.com/bootstrap/javascript.html#dropdowns – Snowcrash

我複製並直接從他們的網站粘貼我的例子。我不明白你的意思。我們需要一個您的網站的例子來幫助進一步。 – noel

這是我發現的第一個實際工作的代碼。謝謝。 –

確保您使用的是最新版本的JQuery

來源

2013-05-11 13:04:17

這很容易解決。包裝你的代碼的元素是li，但它需要是div。這個工作對我來說：

<div class="dropdown"> 
    <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here... 
    <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
    <li><a href="/app/1">Item A</a></li> 
    <li><a href="/app/2">Item B</a></li> 
    <li><a href="/app/3">Item C</a></li> 
    </ul> 
</div>

enter image description here

如果你希望它看起來像一個按鈕，只需添加「BTN」的類列表如下：

<a data-target="#" data-toggle="dropdown" class="dropdown-toggle btn" href="#">

我的頭部分看起來是這樣的：

<link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'> 
<link rel='stylesheet' type='text/css' href='css/bootstrap-responsive.min.css'> 
<script src='js/jquery-2.0.0.min.js' type='text/javascript'> 
<script src='js/bootstrap.min.js' type='text/javascript'>

你媽如果你沒有爲移動設備做任何事情，你希望忽略響應式的CSS。

來源

2013-06-17 14:15:34 Graham

Twitter Bootstrap下拉不起作用

回答

相關問題