Bootstrap下拉菜单不起作用


100

我无法正常使用下拉菜单。我可以使导航栏完美显示,但是当我单击“ Dropdown”(二者之一)时,它不会显示下拉菜单。我曾尝试查看有关此问题的其他文章,但是没有什么能解决每个人的问题。我直接从bootstrap网站复制了源代码,但似乎无法在我的机器上使用它。有人有主意吗?我盯着它看了一个小时,似乎无法弄清楚问题出在哪里。

<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-    target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" role="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>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left" >
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <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><!-- /.navbar-collapse -->


1
对不起,在我写这篇文章的时候。我编辑了说明。
user2540528 2014年

您能给我们链接吗?@ user2540528
STP38

JS文件的链接?
user2540528 2014年

1
我只是复制了您的代码并添加了js / css,它就可以在我的机器上运行了
克里斯

“我直接从bootstrap网站复制了源代码” @ user2540528,您能给我这个链接吗?
STP38 2014年

Answers:


142

也许尝试

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

看看是否行得通。


做到了。为何本地文件无法工作?这些js来源(如果我将其部署在正确的域上)?我只想确保我的应用程序在完成并发布后仍然可以运行。(这是我的第一个,所以这就是我要问的原因)
user2540528 2014年

@ user2540528文件的名称可能与当时的名称不同jquery-1.11.0.js或根本不存在。
克里斯

user2540528您似乎想念bootstrap.css
Avec

1
我的问题是,我在正确的地方bootstrap.css但没有包括在我的包中bootstrap.min.js
codingNightmares

我意识到这些代码行的顺序也很重要。如果您将Google API作为代码的最后一行,则它不起作用。
EfeBüyük17年

114

我有一个bootstrap + rails项目,并且下拉列表工作正常。他们在更新后停止工作了...

这是解决此问题的解决方案,将以下内容添加到.js文件中:

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

解决了我在Bootstrap 3和Rails 4.2中遇到的问题,该下拉列表仅在第一次出现时起作用,而在第二次单击时不起作用。
bovender

带Spud CMS的Grails项目-解决了我的下拉切换问题。
泰勒·拉弗蒂

对此非常感谢1.每个人都在说“在引导程序之前添加jquery”。就是那样 经过一个多小时的调查,这只是他们的答案!
MaNTiS

1
这极大地帮助了我。知道为什么需要此修复程序吗?
布拉克(Brack)

1
这个解决方案对我有用。原来,我已经在网站上两次导入了引导程序,而仅导入了一次之后,它开始工作,而没有解决方案中的问题。
harshpatel991

27

100%工作溶液

只需将您的Jquery链接放在所有js和css链接中

示例正确

<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />

示例错误!

<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>

在我的情况下不起作用。必须使用Iwan B.的解决方案。
toddmo '17

1
@Nabin之所以起作用,是因为我们必须先加载jquery然后再引导,因为引导程序使用了jQuery
Siddaram H

@toddmo它有效,只需检查google crome dbugger的networy选项卡中是否正确加载了jquery,bootstrap和css
LMK

12

将jquery js链接放在bootstrap js链接之前,如下所示:

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

代替:

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

Put the jquery css ...>Put the jquery js ...
allcaps 2015年

2
您的话是正确的,但代码块与您所说的相反。
Astra Bear'9

4

根据getBootstrap.com,下拉菜单基于第三方库Popper.js构建。因此,如果下拉菜单在onclick上不起作用,而仅在下拉菜单上起作用,则包括popper.js,bootstrap.js和bootstrap.css。原因之一是在包含引导程序包之前不包含popper.js。

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></link>

https://getbootstrap.com/docs/4.0/components/dropdowns/


1
对于版本4,这是答案,当我们习惯只在项目中包含Jquery和bootstrap时,这是一个很大的变化。
Vindic

1
是的,顺序确实很重要。
nikhilmeth

这是为我工作的那个。复制从引导页面相同的代码,但是这是他们应该是在正确的顺序。
DuckRodgers

3

我在使用ASP .NET Forms时遇到了这个问题。我使用的解决方案是从<asp:ScriptManager runat="server">母版页中删除或注释掉jQuery和Bootstrap引用。看来它与您放入的jQuery和Bootstrap引用产生了冲突<header>


2

如果仍然有人遇到相同的问题,请确保在浏览器中检查您的视图页面源,以检查是否所有jquery和bootstrap文件都已加载并且文件路径正确。最重要的!确保使用最新的稳定jquery文件。


2

也许有人可以从中受益:

摘要(aka tl; dr)

引导下拉菜单止跌下降,原因是从升级django-bootstrap3版本6.2.211.0.0

背景

我们在传统遇到过类似的问题,django网站严重依赖bootstrap通过django-bootstrap3。该站点一直运行良好,并在生产中继续运行,但在我们的本地测试系统上却没有。代码中没有明显的相关更改,因此最有可能发生依赖性问题。

病征

当访问本地django测试服务器上的站点时,乍一看看起来完全可以:使用样式/布局bootstrap按预期,包括导航栏。但是,所有下拉菜单都无法下拉。

浏览器控制台中没有错误。所有静态文件jscss文件均已成功加载,其他依赖包的功能jquery正在按预期运行。

原来django-bootstrap3,我们在本地python环境中的软件包已升级到最新版本11.0.0,而该网站是使用6.2.2

回滚django-bootstrap3==6.2.2为我们解决问题,尽管我不知道是什么原因造成的。


1

我正在使用Rails 4.0并遇到相同的问题

这是我通过测试的解决方案

添加到Gemfile

gem 'bootstrap-sass'

bundle install

然后添加到app / assets / javascripts / application.js

//= require bootstrap

然后下拉菜单应该起作用

顺便说一句,克里斯的解决方案也对我有用。

但我认为这不太符合资产流水线的想法


0

看起来Rails 4还有很多事情要做。

  1. 在您的Gemfile里面添加。

    gem'bootstrap-sass','〜> 3.2.0.2'

如这里所见

  1. 接下来,您需要运行

    $捆绑安装

这是没人提到的部分

打开您的config / application.rb文件

  1. 在倒数第二个末尾之前添加此权利

    config.assets.precompile + =%w(*。png * .jpg * .jpeg * .gif)

如此处所示,页面下降了约20%。

  1. 接下来在此目录中创建一个custom.css.scss文件

    应用/资产/样式表

如此处所示,离上述任务有点远

  1. 该文件内包含

    @import“引导程序”;


现在,停止服务器并重新启动,一切应该正常。

我尝试在不使用gem的情况下运行引导程序,但对我而言不起作用。

希望能帮助到别人!



0

就我而言,禁用Chrome扩展程序可以修复该问题。我一一从Chrome中删除了它们,直到找到罪魁祸首。

由于我是令人反感的Chrome扩展程序的作者,所以我想最好修复该扩展程序!


0

我的引导程序版本指向bootstap4-alpha,

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>

改为4-beta

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
        crossorigin="anonymous"></script>

它开始工作



0

对于Bootstrap 4,您需要一个附加库。如果您阅读了浏览器控制台,Bootstrap实际上会打印一条错误消息,告诉您需要它才能正常工作。

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)

0

在有角项目中,我们添加angular-cli.json或angular.json这些代码行:

      "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"

  ],

0

我尝试了上述所有答案,唯一适用于我的版本是jquery 1.11.1。我尝试了所有其他版本1.3.2、1.4.4、1.8.2、3.3.1,但导航栏下拉菜单不起作用。

<script src="jquery/jquery-1.11.1.min.js"></script>

0

如果您在Ruby on Rails中遇到问题,Bootstrap Ruby Gem自述文件将提供详尽的解决方案。

或简而言之:

  1. 重命名application.cssapplication.scss
  2. @import "bootstrap";
  3. 添加gem 'jquery-rails'Gemfile除非存在否则。
  4. 添加//= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprocketsapplication.js
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.