爲什麼我的引導程序的下拉菜單不起作用？

我按照http://twitter.github.com/bootstrap/javascript.html#dropdowns上的說明啓用了我的導航欄中的下拉列表，但未能如此操作。我似乎無法顯示我的下拉列表。我的代碼也與網站上的演示相同。誰能幫我解決這個問題嗎？下面是代碼：爲什麼我的引導程序的下拉菜單不起作用？

<ul class="nav"> 
    <li class="dropdown" id="d1"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="d1" > 
       Sub-User Management 
       <b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href=<%=subusers_url%>>Sub-Users</a></li> 
       <li><a href=<%=monitor_records_url%>>Monitors</a></li> 
       <li class="divider"></li> 
      </ul> 
     </li> 
    </ul>

的application.js

$('.dropdown-toggle').dropdown()

來源

2012-08-11 user192249

我終於能夠解決這個問題！我所有的代碼都是完美的，只是在我使用Rails創建應用程序時，我不得不改變一些東西。

對於Rails（開發模式），在application.js中，您需要在調用bootstrap之前調用jquery。

//= require jquery 
//= require bootstrap 
//= require jquery_ujs 
//= require_tree .

然而，爲Rails（生產模式），在application.js中，你需要在調用的jQuery之前調用引導。

//= require bootstrap 
//= require jquery 
//= require jquery_ujs 
//= require_tree .

不過，我仍然在研究爲什麼會這樣。無論如何，它的作品！ :)

來源

2012-08-13 16:35:12 user192249

我不明白爲什麼這會工作，引導需要jquery工作。如果你嘗試預編譯你的資產，你可能會發現它不會再工作 – hellomello 2013-08-31 06:03:58

看起來不錯...但嘗試把下拉菜單鏈接中的報價。
我也改變了第一href只是"#"

<ul class="nav"> 
    <li class="dropdown" id="d1"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" > 
       Sub-User Management 
       <b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="<%=subusers_url%>">Sub-Users</a></li> 
       <li><a href="<%=monitor_records_url%>">Monitors</a></li> 
       <li class="divider"></li> 
      </ul> 
    </li> 
</ul>

並確保你已經包括了自舉dropdown.js文件。

來源

2012-08-11 04:55:00 c0deNinja

沒了..還是不適合我:(我用Rails這樣我已經爲應用程序創建的下拉菜單中的JavaScript文件應自動列入工作：/ – user192249 2012-08-12 17:17:09

你確定它加載所需js文件？使用Firebug或東西來檢查並查看加載的js文件。 – c0deNinja 2012-08-13 00:29:55

我複製粘貼你的代碼的jsfiddle和下拉作品... http://jsfiddle.net/hajpoj/Hf8Xw/3/

，所以我認爲這個問題是另一回事。仔細檢查以確保boostrap-drodown.js正在被頁面加載（查看頁面的源代碼並確認您確實在html源代碼中看到了此行）。

<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>

也可以嘗試重新啓動服務器，檢查你的資產的源路徑等

來源

2012-08-12 19:09:10 hajpoj

沒錯！這是別的東西。看到我的答案的原因所在！謝謝順便說一句！:) – user192249 2012-08-13 16:36:10

像許多其他人問這個問題，我花了幾個小時試圖弄清楚這一點。以下是如果您的下拉列表中不工作什麼可能是錯誤的：

我是新來引導和我來說，我在這裏使用引導演示的模型：

bootstrap demo

但我也跟着後才基本的boostrap安裝。

因此我安裝了'bootstrap.js'文件。檢查代碼並注意，在本演示中，一系列js腳本位於文檔的末尾，但默認的「bootstrap.js」不是其中的一個。刪除它使我的下拉菜單正常工作。

它也可能以其他方式工作在你保持'bootstrap.js'的地方並擺脫其他人。這可能是更好的解決方案。

希望這可以幫助像我這樣的其他可憐的混蛋。對你所有的項目祝好！

來源

2012-11-29 00:09:45

事實上，你包括「數據切換=」下拉菜單「所以並不需要」 $（「下拉菜單，切換」）。下拉菜單（）」，這兩個做同樣的事情！

而且記住，不要忘了進口的jquery.js，在此基礎上bootstrap.js！

來源

2013-02-07 02:26:22 ChrisLee

確保您使用的是最新的JQuery

來源

2013-05-11 12:59:46

在我的Rails3中應用程序，我只是削減所有的一段代碼，涉及到下拉列表中，然後將這段代碼粘貼到一個名爲dropdown.js的新文件中，然後在application.js中需要這個文件這樣我就可以在開發和生產中正常使用我的應用程序也是。在生產jquery之前（如上面的user192249）需要bootstrap.js可能會破壞使用js的應用程序的其他部分。

來源

2013-09-03 07:44:30 user2738214

我在使用Bootstrap的WordPress網站中遇到了同樣的問題。事實上，這是因爲在我的代碼包含在javascript.js文件是這樣的：

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

我所要做的就是寫這樣反而：

<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>

所以確保你包括Bootstrap的javascript.js文件正確。

來源

2014-04-03 23:23:27 OsLivon

-1

<!-- Bootstrap core JavaScript 
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
<script src="js/ie10-viewport-bug-workaround.js"></script>

看看這段代碼。可能在您的頁面末尾，您可能需要更改src鏈接。那麼它可能會工作。

來源

2014-12-24 02:13:38

爲什麼我的引導程序的下拉菜單不起作用？

回答

相關問題