使用引導程序折疊后，導航欄不會下拉菜單

Question

我似乎無法弄清楚為什么我的右上角按鈕“菜單”不會觸發下拉菜單。 誰能指出這是怎么回事？ 當我單擊它時，什么都沒有發生，但是“主頁”應該會下拉。

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

您需要先加載jquery javascript庫，然后再加載bootstraps javascript庫。 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>

另外，如果您希望導航欄正常工作，則應將導航欄品牌和菜單按鈕包裹在導航欄標題類中。 如果您希望菜單以移動寬度顯示在導航欄中，則可以保持原樣。

這是一個工作中的Codepen Codepen

Answer 2

檢查這個小提琴：小提琴

導航欄在較大的屏幕上看起來不錯，但是當屏幕尺寸減小時，將顯示“菜單”選項，單擊該菜單時會在導航中顯示“主頁”選項。

您的代碼唯一的問題是您尚未調用jquery庫。 這是運行引導javascript所必需的。

您只需在調用引導javascript之前在html的開頭添加此腳本標簽。

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

Answer 3

這2個文件丟失。 您需要包括它們。

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

沒有這些文件，它將無法正常工作。

檢查此文件

使用引導程序折疊后，導航欄不會下拉菜單

問題描述

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