使用引导程序折叠后，导航栏不会下拉菜单

Question

I can't seem to figure out why my top right button "Menu" won't trigger the dropdown. 我似乎无法弄清楚为什么我的右上角按钮“菜单”不会触发下拉菜单。 Can anyone point out what's wrong? 谁能指出这是怎么回事？ When I click it nothing happens, but "Home" should dropdown. 当我单击它时，什么都没有发生，但是“主页”应该会下拉。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Store</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="index.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">

<a href = "#" class ="navbar-brand">Site</a>

<button class="navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse">
Menu
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">

<li><a href="#">Home</a></li>

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

</div>









<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

You need to load the jquery javascript library before you load bootstraps javascript library. 您需要先加载jquery javascript库，然后再加载bootstraps javascript库。 Bootstrap runs off of jquery and will not work without loading it first so before the bootstrap.js add a link to jquery it should look like the following: Bootstrap在jquery上运行，如果不先加载它就无法工作，因此在bootstrap.js添加到jquery的链接之前，它应该如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Also if you want your navbar to work correctly you should encase your navbar brand and menu button in the class of navbar-header. 另外，如果您希望导航栏正常工作，则应将导航栏品牌和菜单按钮包裹在导航栏标题类中。 If you want your menu to show in the navbar at mobile widths you can leave it like it is. 如果您希望菜单以移动宽度显示在导航栏中，则可以保持原样。

Here is a working codepen Codepen 这是一个工作中的Codepen Codepen

Answer 2

Check this fiddle : fiddle 检查这个小提琴：小提琴

The navbar looks fine on larger screens but when the screen size is reduced, the Menu option appears which when clicked shows the Home option in the navigation. 导航栏在较大的屏幕上看起来不错，但是当屏幕尺寸减小时，将显示“菜单”选项，单击该菜单时会在导航中显示“主页”选项。

The only problem with your code was that you hadn't called the jquery library. 您的代码唯一的问题是您尚未调用jquery库。 which is required in order to run the bootstrap javascript. 这是运行引导javascript所必需的。

You only need to add this script tag in the head of your html before you call the bootstrap javascript. 您只需在调用引导javascript之前在html的开头添加此脚本标签。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Answer 3

These 2 files are missing. 这2个文件丢失。 You need to include them. 您需要包括它们。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Without these files, it won't work. 没有这些文件，它将无法正常工作。

CHECK THIS FILE 检查此文件

使用引导程序折叠后，导航栏不会下拉菜单

问题描述

3 个解决方案

解决方案1
0 2016-01-26 21:15:21

解决方案2
0 2016-01-26 21:16:03

解决方案3
0 2016-01-26 21:39:49

使用引导程序折叠后，导航栏不会下拉菜单

问题描述

3 个解决方案

解决方案1 0 2016-01-26 21:15:21

解决方案2 0 2016-01-26 21:16:03

解决方案3 0 2016-01-26 21:39:49

解决方案1
0 2016-01-26 21:15:21

解决方案2
0 2016-01-26 21:16:03

解决方案3
0 2016-01-26 21:39:49