Twitter Bootstrap按鈕下拉不下降

我想從Twitter Bootstrap中使用一個簡單的下拉按鈕。 但是，它沒有顯示下拉選項。代碼如下，這裏是鏈接到小提琴：http://jsfiddle.net/nunos/DjHyQ/11/Twitter Bootstrap按鈕下拉不下降

編輯：發現問題。我在<head>中包括bootstrap.js。正如Twiiter引導程序文檔實際所述，一旦我將該行更改爲<body>，它就立即生效。我從來沒有想過<head>或<body>中包含的腳本有所不同。現在我明白了！

<div class="btn-toolbar" style="margin: 0;"> 
    <div class="btn-group"> 
     <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
     </ul>    
    </div> 
</div>

來源

2012-12-07 nunos

..你的小提琴沒有工作，因爲你使用'mootools 1.4.5'導致'TypeError：不能調用未定義的方法'創建'，這裏是一個分叉工作版本使用'jquery 1.7.2' http://jsfiddle.net/VG7G7/ – davidkonrad

好了，您發佈的小提琴不工作，因爲你沒有選擇的jQuery（這是需要引導部件）作爲框架（選擇框是在頁面的右側邊欄）。你是否在你的實際代碼中加載jquery？

來源

2012-12-07 15:54:40 RoryB

我很確定。我在代碼中多次使用過它。 – nunos

你是完全正確的，我忘了把它包括在小提琴上，但我將它包括在我的項目中（測試！）。真的不明白爲什麼它不顯示選項，然後... – nunos

這很奇怪：你有可能發佈頁面標題，所以我們可以看到你正在加載什麼？ – RoryB

這裏是工作fiddle，使用jQuery和引導加載

<div class="btn-toolbar" style="margin: 0;"> 
    <div class="btn-group"> 
     <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> 
     <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
     </ul>    
    </div> 
</div>

來源

2012-12-07 16:00:51 kd7

除了在小提琴中包含jQuery之外，還有其他的改變嗎？ – nunos

我改變了按鈕類我不認爲你有下拉開關 – kd7

我有..我從工作小提琴複製和粘貼到我的項目中的代碼只是沒有顯示我的下拉選項。在同一個頁面中，我有一個jQuery UI進度條，所以jQuery肯定包含在內。真的很困惑這個現在... – nunos

您必須添加一個類下拉的「UL」元素。

<div class="btn-toolbar" style="margin: 0;"> 
    <div class="btn-group"> 
     <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> 
     <ul class="dropdown dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
     </ul>    
    </div> 
</div>

您可以檢查它在這裏工作。 http://jsfiddle.net/DjHyQ/13/

來源

2012-12-07 16:02:46 Ahmed

感謝您的回答，但是，如果您嘗試使用或不使用ul上的「下拉」選項，它的工作原理是一樣的。 http://jsfiddle.net/nunos/DjHyQ/14/ – nunos

所以你唯一的問題是你沒有包括jQuery ..試試這個http://jsfiddle.net/nunos/DjHyQ/11/通過包括jQuery它會工作。 – Ahmed

-2

我認爲你必須忘記在頭上連接Jquery.js或Bootstrap.js，它們都是需要的。我自己有這個問題，並修復它與添加這兩個腳本鏈接

來源

2013-06-14 08:18:48 Frank

該帖子已經提到「從來沒有想過或中包含的腳本存在差異」，所以這個答案有點多餘。 – kgdesouz

Twitter Bootstrap按鈕下拉不下降

回答

相關問題