- 首页
- 其他开发
- Bootstrap 下拉菜单不起作用(单击时不下拉)
Bootstrap 下拉菜单不起作用(单击时不下拉)
[英] Bootstrap dropdown menu not working (not dropping down when clicked)
本文介绍了Bootstrap 下拉菜单不起作用(单击时不下拉)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正试图掌握引导程序，但收效甚微.我只是想让这个模板的本地版本正常工作
http://getbootstrap.com/examples/jumbotron/
我已将 html 直接复制到 html 页面中，并以与网页相同的顺序引用了 css 和 js 文件，仅使用我机器上最新下载的副本.但是，单击下拉菜单旁边的箭头时没有任何反应(即不出现菜单)
我尝试在 jsfiddle 中重现代码，但这更糟，根本无法正确显示菜单.http://jsfiddle.net/andieje/kRX6n/
这是我页面的输出.我也包括了下拉js
<头><标题>无标题页</title><link href="styles/bootstrap.css" rel="stylesheet"/><!-- HTML5 shim 和 Respond.js IE8 支持 HTML5 元素和媒体查询 --><!--[如果是 IE 9]><script src="JavaScript/html5shiv.js"></script><script src="JavaScript/respond.min.js"></script><![endif]--><身体><div class="navbar navbar-inverse navbar-fixed-top"><div class="容器"><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><a class="navbar-brand" href="#">项目名称</a>
<div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#about">关于</a></li><li><a href="#contact">联系方式</a></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><ul class="下拉菜单"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li class="dropdown-header">Nav header</li><li><a href="#">分隔链接</a></li><li><a href="#">一个单独的链接</a></li><form class="navbar-form navbar-right"><div class="form-group"><input type="text" placeholder="Email" class="form-control">
<div class="form-group"><input type="password" placeholder="Password" class="form-control">
<button type="submit" class="btn btn-success">登录</button></表单></div><!--/.navbar-collapse -->
<script type="text/javascript" src="JavaScript/jquery.js"/><script type="text/javascript" src="JavaScript/bootstrap-min.js"/><script type="text/javascript" src="JavaScript/bootstrap-dropdown.js"/></html>
我也尝试添加此代码但无济于事
解决方案
我遇到了同样的问题，该解决方案对我有用，希望它也对你有用.
<script src="content/js/jquery.min.js"></script><script src="content/js/bootstrap.min.js"></script><脚本>$(document).ready(function () {$('.dropdown-toggle').dropdown();});
请在bootstrap.min.js"文件之前包含jquery.min.js"文件，如果您乱序将不起作用.
I'm trying to get to grips with bootstrap and having little success. I am just trying to get a local version of this template working
http://getbootstrap.com/examples/jumbotron/
I have copied the html directly into a html page and referenced the css and js files in the same order as the webpage only using copies from the latest download on my machine. However nothing happens when the arrow next to dropdown is clicked (i.e. no menu appears)
I have tried to reproduce the code in a jsfiddle but that is even worse and doesnt display the menu properly at all. http://jsfiddle.net/andieje/kRX6n/
Here is my page's output. I also included the dropdown js too
<!DOCTYPE html>
<html>
<head><title>
Untitled Page
</title><link href="styles/bootstrap.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="JavaScript/html5shiv.js"></script>
<script src="JavaScript/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</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 class="divider"></li>
<li class="dropdown-header">Nav header</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-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<script type="text/javascript" src="JavaScript/jquery.js" />
<script type="text/javascript" src="JavaScript/bootstrap-min.js" />
<script type="text/javascript" src="JavaScript/bootstrap-dropdown.js" />
</body>
</html>
I also tried adding this code but to no avail
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
解决方案
i faced the same problem , the solution worked for me , hope it will work for you too.
<script src="content/js/jquery.min.js"></script>
<script src="content/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Please include the "jquery.min.js" file before "bootstrap.min.js" file, if you shuffle the order it will not work.
这篇关于Bootstrap 下拉菜单不起作用(单击时不下拉)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
