Bootstrap - 下拉菜单不起作用？答案

【问题标题】：Bootstrap - dropdown menu not working?Bootstrap - 下拉菜单不起作用？
【发布时间】：2012-03-20 17:40:35
【问题描述】：

我在 Bootstrap 中的下拉菜单似乎不起作用 - 谁能提醒我这个问题？现在它显示下拉菜单，但单击它什么也不做。谢谢！

JS：

$(document).ready( function() {
$('.dropdown-toggle').dropdown();
});

HTML：

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container" style="width: auto;">

            <a class="brand" style="text-indent: 3em" href="#">
                Title
            </a>

            <ul class="nav">
                <li><a href="#">Profile</a></li>
                <li class="active"><a href="#">Statistics</a></li>
                <li><a href="#">Reader</a></li>

                <li class="dropdown" id="menu1">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
                    Options
                    <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>

            </ul>


        </div>
    </div>
</div>

【问题讨论】：

点击时的预期行为是什么？我不明白你的问题。
它应该只是一个简单的下拉菜单，当点击一个按钮时会显示更多选项。我按照网上的引导指南几乎到了一个 Q，但它仍然无法正常工作。该按钮将出现，但单击它不会生成下拉菜单。
你的代码对我来说很好，你忘了可能包括 jQuery 和下拉插件吗？这是您的代码工作的演示：jsfiddle.net/u5vhS/18（我覆盖了另一个问题的演示，我回答的问题与此类似）
奇怪...我实际上解决了这个问题，但是以一种奇怪的方式。我在 bootstrap/js 中有下拉插件，并将其移至通用 js 文件夹。 jquery 是否真的需要与插件位于同一目录中？这将解释错误...无论如何，感谢您的帮助！
不，只要您在文档中正确引用它们，js 脚本的位置并不重要。

标签： html css twitter-bootstrap

【解决方案1】：

检查您是否引用了jquery.js 之前 bootstrap.js 并且 bootstrap.js 仅加载一次。这为我解决了同样的错误：

<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

【讨论】：

两次引用 bootstrap 时出现同样的问题。
出错，但切换到然后也能正常工作.. 太奇怪了

【解决方案2】：

这是特定于 Rails 的答案，但我的 Rails 应用程序中的 Bootstrap 下拉菜单也有同样的问题。解决的问题是将其添加到 app/assets/javascripts/application.js：

//= 需要引导

希望对某人有所帮助。

【讨论】：

【解决方案3】：

放

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

文件在最后一个

<script src="jq/jquery-2.1.1.min.js"></script>  solved this problem for me .

我现在就是这样写的，没问题

<script src="jq/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

【讨论】：

【解决方案4】：

我必须下载源文件，而不仅仅是它说用于在引导网站上快速启动的压缩文件

【讨论】：

【解决方案5】：

我遇到了类似的问题。视觉工作室的 bootstrap.js 版本似乎已经过时了。我只是指向了这个 URL：

    <link id="active_style" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/cosmo/bootstrap.min.css">

为了完整起见，这里是 HTML 和 javascript

<ul class="nav navbar-nav navbar-right">
                    <li id="theme_selector" class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Theme <b class="caret"></b></a>
                        <ul id="theme" class="dropdown-menu" role="menu">
                            <li><a href="#">Amelia</a></li>
                            <li><a href="#">Cerulean</a></li>
                            <li><a href="#">Cyborg</a></li>
                            <li><a href="#">Cosmo</a></li>
                            <li><a href="#">Darkly</a></li>
                            <li><a href="#">Flatly</a></li>
                            <li><a href="#">Lumen</a></li>
                            <li><a href="#">Simplex</a></li>
                            <li><a href="#">Slate</a></li>
                            <li><a href="#">Spacelab</a></li>
                            <li><a href="#">Superhero</a></li>
                            <li><a href="#">United</a></li>
                            <li><a href="#">Yeti</a></li>
                        </ul>
                    </li>
                </ul>

Javascript

$('#theme li').click(function () {
        //alert('item: ' + $(this).text());
        switch_style($(this).text());
    });

希望对某人有所帮助

【讨论】：

【解决方案6】：

两次导入jquery会报错

<script src="static/public/js/jquery/jquery.min.js"></script>

或

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="" crossorigin="anonymous"></script>

【讨论】：

【解决方案7】：

如果我没听错的话，当你说点击什么都不做时，你的意思是它没有指向你的 URL 吗？

在锚标记<a href>中，您似乎没有将文件路径传递给href 属性。因此，请将 # 替换为您要链接的文件的实际路径。

<li><a href="#">Action</a></li>
<li><a href="action link here">Another action</a></li>
<li><a href="something else link here">Something else here</a></li>
<li class="divider"></li>
<li><a href="seperated link here">Separated link</a></li>

我希望这对您的问题有所帮助。

【讨论】：

您好，感谢您的评论！我的意思是下拉菜单甚至没有出现，将其下拉的按钮在页面上，但单击它不会下拉菜单。我认为我的 jquery 一定有问题，知道吗？
你能把你的页面链接发给我吗？我会看看它，如果你愿意，我会向你展示一种更简单的 JQuery 下拉菜单方法
他甚至没有正确回答您的问题，为什么这是正确的答案？这是误导。 @theeggman85

【解决方案8】：

您缺少“btn btn-navbar”部分。例如：

        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>

查看导航栏文档：

Twitter Bootstrap

【讨论】：

【解决方案9】：

如果您使用的是电子或其他铬框架，则必须通过以下方式在窗口中明确包含 jquery：

<script language="javascript" type="text/javascript" src="local_path/jquery.js" onload="window.$ = window.jQuery = module.exports;"></script>

【讨论】：

【解决方案10】：

当我检查时，我看到 display: none; 值在 .dropdown-menu 引导 css 类中。因此我删除了它。

【讨论】：

【解决方案11】：

在你的页面中添加以下代码

  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
    function EndRequest(sender, args) {
        if (args.get_error() == undefined) {
        $('.dropdown-toggle').dropdown();
        }
    }

【讨论】：

那是什么？一些 VB 专有代码移植到 C# 并用于维护 1986 年的大型机？