为什么我的引导程序的下拉菜单不起作用？

我按照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

为什么我的引导程序的下拉菜单不起作用？

回答

相关问题