Question

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

Answer 1

像许多其他人一样问这个问题，我花了好几个小时试图解决这个问题。如果您的下拉菜单不起作用，这可能是错误的：

我是bootstrap的新手，在我的情况下，我在这里使用bootstrap demo作为模型：

bootstrap demo

但是只有在我按照基本的boostrap安装后才能使用。

因此我安装了'bootstrap.js'文件。检查代码并注意，在本演示中，一系列js脚本位于文档的末尾，但默认的“bootstrap.js”不是其中之一。删除它使我的下拉列表正常工作。

它也可能在你保持'bootstrap.js'的地方相反，并摆脱其他人。这可能是一个更好的解决方案。

希望这可以帮助像我这样的其他可怜的混蛋。祝你所有项目都满意！

Answer 2

看起来不错......但请尝试将下拉菜单链接放在引号中我还将第一个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>

并确保已包含bootstrap-dropdown.js文件。

Answer 3

我将你的代码粘贴到jsfiddle，下拉工作...... http://jsfiddle.net/hajpoj/Hf8Xw/3/

所以我认为这个问题是别的。仔细检查以确保页面上载了boostrap-drodown.js（查看页面的来源并确认你确实在html源代码中看到了这一行）。

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

还尝试重新启动服务器，检查资产来源路径等。

Answer 4

我终于能够解决这个问题了！我的所有代码都很完美，只是因为我在Rails中创建应用程序时必须更改一些内容。

对于Rails（开发模式），在application.js中，需要在调用bootstrap之前调用jquery。

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

但是，对于Rails（生产模式），在application.js中，您需要在调用jquery之前调用bootstrap。

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

但是，我还在研究为什么会如此。无论如何，它的作品！：）

Answer 5

事实上，你包含“data-toggle =”下拉列表“，所以不需要”$（'。dropdown-toggle'）。dropdown（）“，这两个做了同样的事情！

请记住，不要忘记根据它导入jQuery.js，bootstrap.js！

Answer 6

确保您使用的是最新的JQuery

Answer 7

在我的rails3应用程序中，我只剪切了与下拉列表相关的所有代码，然后将此代码粘贴到名为dropdown.js的新文件中，然后在application.js中要求此文件通过这种方式，我在开发和生产中也正常运行了我的应用程序。在生产中的jquery之前需要bootstrap.js（如上面的user192249）可能会破坏使用js的应用程序的其他部分。

Answer 8

我在WordPress网站上使用Bootstrap时遇到了同样的问题。事实上，这是因为在我的代码中我包含了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文件。

Answer 9

<!-- 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链接。那么它可能会起作用。

为什么我的bootstrap的下拉列表不起作用？

9 个答案: