2

我按照http://twitter.github.com/bootstrap/javascript.html#dropdowns上的说明在导航栏中启用下拉列表，但没有这样做。我似乎无法显示我的下拉列表。我的代码也和网站上的demo一样。谁能帮我解决这个问题？以下是代码：

<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>

应用程序.js

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

9 回答 9

3

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

我是引导程序的新手，在我的情况下，我在这里使用引导程序演示作为模型：

引导演示

但只有在我遵循了基本的 boostrap 安装之后。

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

它也有可能在你保留'bootstrap.js'并摆脱其他人的地方以另一种方式工作。这可能是一个更好的解决方案。

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

于 2012-11-29T00:09:45.790 回答
1

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

于 2012-08-11T04:55:00.923 回答
0

我在 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 文件。

于 2014-04-03T23:23:27.917 回答
0

我终于能够解决这个问题了！我所有的代码都很完美，只是我在 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 .

但是，我仍在研究为什么会这样。无论如何，它有效！:)

于 2012-08-13T16:35:12.777 回答
0

我将您的代码复制粘贴到 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-12T19:09:10.980 回答
0

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

于 2013-09-03T07:44:30.627 回答
0

确保您使用的是最新的 JQuery

于 2013-05-11T12:59:46.130 回答
0

实际上，您包含“data-toggle="dropdown"，因此不需要“$('.dropdown-toggle').dropdown()”，这两个做了同样的事情！

并且记住，不要忘记在它的基础上导入 jQuery.js、bootstrap.js！

于 2013-02-07T02:26:22.900 回答
-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-24T02:13:38.107 回答