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

Why doesn't my bootstrap's dropdown work?

本文关键字：下拉菜单 不起作用 引导程序 我的 为什么      更新时间：2023-09-26

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

应用.js

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

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

我是引导程序的新手，就我而言，我在这里使用引导程序演示作为模型：

引导演示

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

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

它也有可能以相反的方式工作，你保持"引导.js"并摆脱其他。这可能是一个更好的解决方案。

希望这能帮助像我这样的其他可怜的混蛋。祝您所有项目一切顺利！

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

并确保已包含引导下拉列表.js文件。

我将您的代码复制粘贴到 jsfiddle 中，下拉菜单有效...http://jsfiddle.net/hajpoj/Hf8Xw/3/

所以我认为问题是另一回事。仔细检查以确保 boostrap-drodown.js 正在由页面加载（查看页面的源代码并验证您是否确实在 html 源代码中看到此行）。

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

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

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

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

事实上，你包括了"data-toggle="dropdown"，所以不需要"$（'.dropdown-toggle'）.dropdown（）"，这两个做了同样的事情！

请记住，不要忘记基于它导入jQuery.js，bootstrap.js！

确保您使用的是最新的 JQuery

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

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

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

相关文章：