twitter-bootstrap Bootstrap 可折叠菜单不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19897256/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Collapsible Menu not working
提问by secondubly
I'm having an issue getting the collapsible navigation bar to load on a page - the button appears when you shrink the screen, but when I click on it, nothing happens. The console isn't throwing me any errors, so I'm assuming there must be something wrong with my css/javascript, but I don't really know what.
我在将可折叠导航栏加载到页面上时遇到问题 - 缩小屏幕时会出现该按钮，但是当我单击它时，没有任何反应。控制台没有给我任何错误，所以我假设我的 css/javascript 肯定有问题，但我真的不知道是什么。
If it matters, I'm linking through with the Bootstrap CDN on my page - I don't know if that requires me to include the plugins manually or not (I don't think it would but I'm not sure).
如果重要的话，我正在链接我页面上的 Bootstrap CDN - 我不知道这是否需要我手动包含插件（我认为不会，但我不确定）。
The following is my HTML and Javascript link-ins:
以下是我的 HTML 和 Javascript 链接：
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="#">Operation Pulse</a></li>
<li><a href="#">Forum</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Media <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="news/">News & Updates</a></li>
<li><a href="#">Indie Pulse</a></li>
<li><a href="#" style="text-transform: lowercase;">rec</a></li>
<li><a href="#">Geeks and Giggles</a></li>
<li class="divider"></li>
<li><a href="#">Podcasts</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Info <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">About Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="crew.php">Crew</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
JS
JS
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"></script>
回答by Zim
Change the data-target=in the button to.. .navbar-collapse
data-target=将按钮中的更改为...navbar-collapse
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
回答by AbdulAzizFarooqi
Most of the time, boostrap.js file reference two times. In our case, it was referenced twice, one in master and others by mistake in the inner pages (Page layout in SharePoint Case).
大多数时候，boostrap.js 文件引用两次。在我们的例子中，它被引用了两次，一次在母版中，另一次在内页中被错误地引用（SharePoint 案例中的页面布局）。
