twitter-bootstrap Bootstrap 3 中的导航栏下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19483313/
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
Navbar Dropdown in Bootstrap 3
提问by
I recently started learning and using Bootstrap 3. I figured I would start with something simple- a header and a dropdown bar. I used the code from the Bootstrap website.
我最近开始学习和使用 Bootstrap 3。我想我会从一些简单的东西开始——一个标题和一个下拉栏。我使用了 Bootstrap 网站上的代码。
I started out with the basic Bootstrap template, then added the bootstrap navbar. This is my code so far.
我从基本的 Bootstrap 模板开始，然后添加了引导程序导航栏。到目前为止，这是我的代码。
<!DOCTYPE html>
<html>
<head>
<title>WEBSITE NAME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>WEBSITE NAME</h1>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Software</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://twitter.com/"><span class="glyphicon glyphicon-comment"></span> Twitter</a></li>
<li><a href="https://youtube.com/"><span class="glyphicon glyphicon-facetime-video"></span> YouTube</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- 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="js/bootstrap.min.js"></script>
</body>
</html>
The dropdown menu is absolutely not working at all- hovering or clicking it. What do I need to do?
下拉菜单完全不起作用 - 悬停或单击它。我需要做什么？
EDIT:I used the Safari web inspector and the resource "jquery.js" is red (indicating it is missing). This comes from the lines: I am writing this based off the default basic page from the Bootstrap site. I'm not sure what to change the path to in order to correct it.There is no 'jquery.js' file in the project folder provided.
编辑：我使用了 Safari 网络检查器，资源“jquery.js”是红色的（表示它丢失了）。这来自以下几行：我是根据 Bootstrap 站点的默认基本页面编写的。我不确定要将路径更改为什么才能更正它。提供的项目文件夹中没有“jquery.js”文件。
采纳答案by
Success!
成功！
I noticed that the 'code.jquery.com/jquery.js' file was unreachable in the Safari web inspector. The issue was this line:
我注意到在 Safari Web 检查器中无法访问“code.jquery.com/jquery.js”文件。问题是这一行：
<script src="//code.jquery.com/jquery.js"></script>
The file could not be reached. For some reason, the http: part was missing. Changing the code to
无法访问该文件。出于某种原因，http: 部分丢失了。将代码更改为
<script src="http://code.jquery.com/jquery.js"></script>
fixed the issue! Huzzah!
修复了问题！哈扎！
Additional Note: It think that, if this were run online and not locally, the http: part would not be required.
附加说明：它认为，如果这是在线运行而不是本地运行，则不需要 http: 部分。
回答by Lloyd Banks
I ran your code after taking out the "html5shiv" and "respond.min" references and the dropdown menu works fine. I suspect the jQuery and Bootstrap JS files may have their file paths stated incorrectly.
我在取出“html5shiv”和“respond.min”引用后运行了你的代码，下拉菜单工作正常。我怀疑 jQuery 和 Bootstrap JS 文件的文件路径可能有误。
回答by dav1dsm1th
the section:-
这部分：-
<ul class="nav navbar-nav navbar-right">
<li><a href="https://twitter.com/"><span class="glyphicon glyphicon-comment"></span> Twitter</a></li>
<li><a href="https://youtube.com/"><span class="glyphicon glyphicon-facetime-video"></span> YouTube</a></li>
</ul>
</li>
</ul>
has an extra </ul> and </li> - which is probably not causing your problem, but won't be helping...
有一个额外的 </ul> 和 </li> - 这可能不会导致您的问题，但不会有帮助......
回答by WebDev67
I loaded this exact file onto my WAMP server locally and everything worked perfectly fine: You might want to change this at the bottom of the page: src="http://code.jquery.com/jquery.js" There is nothing wrong with your code and the HTML5 shiv and respond.js has nothing to do with your menu not working...
我在本地将这个确切的文件加载到我的 WAMP 服务器上，一切正常：您可能希望在页面底部更改此文件：src="http://code.jquery.com/jquery.js" 没有任何问题使用您的代码和 HTML5 shiv 和 respond.js 与您的菜单不起作用无关...
You might however want to use Google Chrome and use the inspect element to make sure your reference points are correct.
但是，您可能希望使用 Google Chrome 并使用检查元素来确保您的参考点是正确的。
Hover doesn't work out of the box in BS3, you can use a custom javascript to get that working... I use it here: http://thisamericanjourney.com/hover over the about menu item: //This allows the user to hover over the menu without clicking on it
悬停在 BS3 中无法开箱即用，您可以使用自定义 javascript 使其工作...我在这里使用它：http: //thisamericanjourney.com/ 将鼠标悬停在关于菜单项上：//这允许用户将鼠标悬停在菜单上而不点击它
$(function() {
$('ul.nav li.dropdown').hover(function() {
$('.dropdown-menu', this).fadeIn('fast');
}, function() {
$('.dropdown-menu', this).fadeOut('fast');
});
});
