引导下拉菜单不起作用

I am having trouble getting my dropdowns to work. I can get the navbar to show up perfectly, but when I click on "Dropdown" (either of them) it does not display the dropdown menu. I have tried looking on other posts about this, but nothing that fixed everyone's problems helped. I copied the source straight from bootstrap's website, but I can't seem to get it to work on my machine. Anyone have any ideas? I have been staring at it for an hour and can't seem to figure out what the problem is.

我的下拉工作很难完成。我可以让导航条完美地显示出来，但是当我点击“下拉菜单”(它们中的任何一个)时，它都不会显示下拉菜单。我试过查看其他的帖子，但是没有什么能解决每个人的问题。我直接从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 -->

13 个解决方案

#1

112

Maybe try with

也许试着

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

and see if it will work.

看看能不能行。

#2

I had a bootstrap + rails project, and dropdown worked fine. They stopped to works after an update...

我有一个bootstrap + rails项目，下拉很好。更新后，他们停止工作……

This is the solution that fixed the problem, add the following to .js file:

这是解决问题的方法，添加以下的。js文件:

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

#3

100% working solution

100%的工作方案

just place your Jquery link first of all js and css links

只需将Jquery链接放在所有js和css链接的前面

Example Correct

正确的例子

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

Example Wrong!

例子错了!

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

#4

Put the jquery js link before the bootstrap js link like so:

将jquery js链接放在引导js链接之前，如下所示:

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

instead of:

而不是:

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

#5

In case anyone still facing same problem be sure to check your your view Page source in your browser to check whether all the jquery and bootstrap files are loaded and paths to the file are correct. Most important! make sure to use latest stable jquery file.

如果有人仍然面临同样的问题，请确保在浏览器中检查您的视图页面源，以检查是否加载了所有jquery和bootstrap文件，以及文件的路径是否正确。最重要的!确保使用最新稳定的jquery文件。

#6

I faced this while I was using ASP .NET Forms. The solution I used was deleting or commenting out jQuery and Bootstrap references from the <asp:ScriptManager runat="server"> in the master page. It seems it creates a conflict with the jQuery and Bootstrap references that you put in the <header>.

我在使用asp.net表单时遇到了这个问题。我使用的解决方案是从主页的中删除或注释jQuery并引导引用。它似乎与您放在

中的jQuery和引导引用产生了冲突。

#7

Looks like there is more to be done for Rails 4.

看起来对于Rails 4还有更多的事情要做。

Inside you Gemfile add.

在您Gemfile添加。

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

宝石的bootstrap-sass”、“~ > 3.2.0.2 '

as seen here

正如我们所见

Next you need to run

接下来你需要跑步

$bundle install

美元包安装

This is the part no one has mentioned

这是没有人提到的部分

Open you config/application.rb file

你打开config /应用程序。rb文件

add this right before the second to last end

把这个加在倒数第二到最后

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

config.assets。预编译+ = % w(*。png * . jpg * jpeg * gif)。

as seen here about a 20% down the page.

如图所示，这一页大约有20%。

Next create a custom.css.scss file in this directory

接下来创建一个custom.css。该目录中的scss文件

app/assets/stylesheets

应用程序/资产/样式表

as seen here a little further down from the above task

如图所示，距离上面的任务稍远一点

Inside that file include

内部文件包括

@import "bootstrap";

@ import“引导”;

Now stop your server and restart and everything should work fine.

现在停止服务器重启，一切正常。

I tried to run bootstrap without using a gem but it didn't work for me.

我试图在没有使用gem的情况下运行bootstrap，但它对我不起作用。

Hope that helps someone out!

希望这能帮助别人!

#8

I am using rails 4.0 and ran into the same problem

我正在使用rails 4.0，遇到了同样的问题

Here is my solution that passed test

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

add to Gemfile

添加到Gemfile

gem 'bootstrap-sass'

run

运行

bundle install

then add to app/assets/javascripts/application.js

然后加入app /资产/ javascript / application.js

//= require bootstrap

Then the dropdown should work

然后下拉菜单就可以了

By the way, Chris's solution also work for me.

顺便说一下，克里斯的方法对我也适用。

But I think it is less conform to the asset pipeline idea

但我认为它不太符合资产管道计划

#9

I think it's the matter of the route of your route file. Not the bootstrap nor the JQuery file.

我认为这是你的路径文件的问题。不是引导程序，也不是JQuery文件。

#10

In my case, disabling Chrome Extensions fixed it. I removed them from Chrome one by one until I found the culprit.

在我的例子中，禁用Chrome扩展修复了它。我一个一个地从铬合金中取出来，直到找到罪魁祸首。

Since I'm the author of the offending Chrome extension, I guess I better fix the extension!

既然我是Chrome扩展的作者，我想我最好修复这个扩展!

#11

My bootstrap version was pointing to bootstap4-alpha,

我的bootstrap版本指向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>

changed to 4-beta

改为4 beta

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

and it started working

它开始工作

#12

the problem is that href is href="#" you must remove href="#" in all tag

问题是href= href="#"必须在所有标记中删除href="#"

#13

-3

Just use this 100% working trick to resolve your dropdown menu problem of Bootstrap.

使用这个100%工作技巧来解决你的下拉菜单问题。

Paste both these files any where in the page after opening of body tag. If you paste them inside body tag then your problem persists.

打开body标记后，将这两个文件粘贴到页面的任何位置。如果您将它们粘贴到body标签中，那么您的问题将继续存在。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->

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

#1

112