logo标签列表

Bootstrap - 下拉菜单无法正常工作？

htmlcsstwitter-bootstrap
50

我的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>
点击后预期的行为是什么？我不明白你的问题。 - Andres Ilich
3
你的代码对我来说运行得很好，你可能忘记包括jQuery和下拉插件了吗？这里是你的代码工作的演示链接：http://jsfiddle.net/u5vhS/18/ （我覆盖了另一个与此类似的问题的演示）。 - Andres Ilich
奇怪...我实际上解决了这个问题，但是用了一种奇怪的方法。我把下拉插件从bootstrap/js移动到通用js文件夹中。Jquery是否需要与插件在同一个目录中？这可以解释错误的原因...无论如何，感谢您的帮助！ - theeggman85
只是对theeggman85的解决方案进行评论 - 我不太确定我是如何引起这个问题的。但是，触摸bootstrap下拉文件就解决了它...我认为这可能与包含顺序有关。 - renen
当我使用Firebug进行调试时，我遇到了相同的问题，出现了错误。TypeError: $(...).dropdown不是一个函数我已经包含了jQuery，并且使用我的视图源代码确认了它。 - CaffeineShots
显示剩余3条评论
12个回答
115

检查是否在bootstrap.js之前引用了jquery.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>
5
当引用Bootstrap两次时，我也遇到了同样的问题。 - Tim
出现了错误，但是切换到<script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/jquery-1.8.0.js"></script> 之后也能正常工作... 真奇怪。 - aswzen
10

这是一个关于Rails的问题，但在我的Rails应用程序中，我也遇到了Bootstrap下拉菜单的同样问题。解决方法是将以下内容添加到app/assets/javascripts/application.js文件中：

//= require bootstrap

希望能对某些人有所帮助。

8
放置
<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

我已经思考了几个小时，只是发现这是由于bs4和bs5之间的差异造成的，即你应该用bs5中的data-bs-toggle="dropdown"替换bs4中的data-toggle="dropdown"，反之亦然，希望这可以帮助解决问题。

2
双重导入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>
1

我遇到了类似的问题。看起来Visual Studio使用的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());
    });

希望它能帮助到某人。
1
我不得不下载源文件，而不是仅仅使用Bootstrap网站上所说的压缩文件来快速开始。
0

如果我理解正确，当你说点击没有反应时，是指它没有指向你的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肯定有问题，你有什么想法吗？ - theeggman85
请问您能否在私信中发送您的页面链接？我会查看它，或者如果您想要的话，我可以用JQuery为下拉菜单展示更简单的方法。 - user1130272
37
他甚至没有正确回答你的问题，怎么可能这是正确的答案？这是误导性的。@theeggman85 - wingskush
0

你缺少了 "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

0
当我检查时，我发现 display: none; 值在 .dropdown-menu bootstrap css 类中。因此我将其删除了。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接