Bootstrap 3導航欄不會切換（已檢查現有解決方案，在單擊時仍不會切換折疊）
[英]Bootstrap 3 Navbar won't toggle (have checked existing solutions, still won't toggle collapse when clicked on)
問題描述
我的引導網站li標簽將在移動版本上壓縮。 但是當我單擊切換按鈕時，導航欄將不會在移動版本上加載。
這是帶有javascript參考的html / css代碼：
<!DOCTYPE html> <html lang="en"> <head> <title>Welcome to our website</title> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/respond.min.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top" id="main-navbar"> <div class="container"> <div class="navbar-header"> <a href="" class="navbar-brand">FaceTheMusic</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav"> <li><a href="">Home</a></li> <li><a href="">Login</a></li> <li><a href="">Search</a></li> <li><a href="">Upload</a></li> </ul> </div> </div> </div> <div id="navPlayer" class="navbar navbar-inverse navbar-fixed-bottom"> <ul> <li>Home</li> </ul> </div> <br /> <br/> <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />This is a test <br />This is a test <br />This is a test <br /> This is a test <br />This is a test <br />This is a test <br />This is a test <br />This is a test <br /> This is a test <br />This is a test <br />This is a test <br />This is a test <br />This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />This is a test <br />This is a test <br />This is a test <br />This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> </body> </html>
2 個解決方案
解決方案1
0 已采納 2015-09-02 15:24:47
數據目標之間有一個額外的空間
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target=".navHeaderCollapse">
它應該是
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
如果您修復此問題，它應該可以工作。 https://jsfiddle.net/5fx9qwuy/1/
解決方案2
0 2015-09-02 21:20:22
阿卜杜拉·海德爾（Abdullah Haider）嗨。
為什么這不適合您的幾件事。
在主導航代碼塊中，您缺少一些classes和一個id 。
<ul>上方的div應該包含此id ... id="navbar" 。
另外，您將所有JS放在頁面的頂部，請嘗試始終將JS鏈接放在頁面的最底部。
這是您的代碼的有效提琴 。
嘗試以此為導航欄的起點。
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="">Home</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Upload</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
瀏覽此代碼和您的導航欄代碼以查看更改。
希望這有助於您入門。
Bootstrap toggle-collapse展開我的導航欄菜單，但不會折疊它
[英]Bootstrap toggle-collapse expands my navbar menu but won't collapse it
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.