Twitter Bootstrap導航崩潰單擊隱藏
[英]Twitter Bootstrap nav collapse Hide on click
問題描述
當我單擊菜單項時，菜單不會關閉。 我已經檢查了JS和CSS的導入，看似一切正常，還需要執行其他操作來運行菜單嗎？
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#home" class="active scroll">Home</a></li>
<li><a href="#about" class="scroll">Sobre</a></li>
<li><a href="#services" class="scroll">Serviços</a></li>
<li><a href="#testimonials" class="scroll">Opiniões</a></li>
<li><a href="#gallery" class="scroll">Gallery</a></li>
<li><a href="#news" class="scroll">News</a></li>
<li><a href="#contact" class="scroll">Contact</a></li>
</ul>
</div>
</div>
</nav>
4 個解決方案
解決方案1
2 已采納 2016-08-08 14:01:23
對我來說...
$(document).ready(function(){ $('.navbar-collapse a').on('click', function(){ $('.navbar-toggle').click(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#home" class="active scroll">Home</a></li> <li><a href="#about" class="scroll">Sobre</a></li> <li><a href="#services" class="scroll">Serviços</a></li> <li><a href="#testimonials" class="scroll">Opiniões</a></li> <li><a href="#gallery" class="scroll">Gallery</a></li> <li><a href="#news" class="scroll">News</a></li> <li><a href="#contact" class="scroll">Contact</a></li> </ul> </div> </div> </nav>
解決方案2
1 2016-08-08 13:59:46
我不確定，但我認為這可能取決於jquery ui ...一些引導功能。 對於當前的問題，我無濟於事...我在導入方面也遇到了很多麻煩..您可以嘗試在瀏覽器調試控制台上進行檢查，以確保也正在加載所有內容。在Chrome瀏覽器上：f12，制表符來源。
希望對您有所幫助。
解決方案3
1 2016-08-08 14:05:34
Try It, I think, it usefull.
<nav class="navbar navbar-static-top">
<div>
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_logistic" aria-expanded="false" aria-controls="navbar" id="button_menu_toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar line_orange"></span>
<span class="icon-bar line_orange"></span>
<span class="icon-bar line_orange"></span>
</button>
</div>
<div id="navbar_logistic" class="navbar-collapse collapse">
<ul class="nav navbar-nav flot_none">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Home2</a></li>
<li><a href="#">Home3</a></li>
<li><a href="#">Home4</a></li>
</ul>
</div>
</div>
</nav>
解決方案4
1 2016-08-08 14:11:18
看一下這個
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> <body> <!-- Fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#home" class="active scroll">Home</a></li> <li><a href="#about" class="scroll">Sobre</a></li> <li><a href="#services" class="scroll">Serviços</a></li> <li><a href="#testimonials" class="scroll">Opiniões</a></li> <li><a href="#gallery" class="scroll">Gallery</a></li> <li><a href="#news" class="scroll">News</a></li> <li><a href="#contact" class="scroll">Contact</a></li> </ul> </div> </div> </nav> </body>
Twitter Bootstrap Collapse / Responsive Nav 在 FF / Chrome 中不起作用
[英]Twitter Bootstrap Collapse / Responsive Nav not working in FF / Chrome
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.