引导 – 下拉菜单不工作?
我在Bootstrap下拉菜单似乎没有工作 – 任何人都可以提醒我的问题? 现在它显示下拉菜单,但点击它什么都不做。 谢谢!
JS:
$(document).ready( function() { $('.dropdown-toggle').dropdown(); });
HTML:
<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" style="text-indent: 3em" href="#"> Title </a> <ul class="nav"> <li><a href="#">Profile</a></li> <li class="active"><a href="#">Statistics</a></li> <li><a href="#">Reader</a></li> <li class="dropdown" id="menu1"> <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> Options <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><a href="#">Separated link</a></li> </ul> </li> </ul> </div> </div> </div>
对不起,我无法立即评论你的post。
如果我正确地得到了你,当你说点击什么都不做时,你的意思是说它不指向你的URL?
在锚标签<a href>
看起来你没有把你的文件path传递给href
属性。 因此,将#replace为您要链接的文件的实际path。
<li><a href="#">Action</a></li> <li><a href="action link here">Another action</a></li> <li><a href="something else link here">Something else here</a></li> <li class="divider"></li> <li><a href="seperated link here">Separated link</a></li>
我希望这有助于您的问题。
检查你是否引用jquery.js
之前 bootstrap.js
和 bootstrap.js
只加载一次 。 这为我解决了同样的错误:
<script type="text/javascript" src="js/jquery-1.8.0.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>
这是一个Rails的具体答案,但我有我的Rails应用程序中的Bootstrap下拉菜单相同的问题。 是什么修复了这个应用程序/资产/ javascripts / application.js:
// =需要引导
希望能帮助别人。
把
<script src="js/bootstrap.min.js"></script>
在最后的文件
<script src="jq/jquery-2.1.1.min.js"></script> solved this problem for me .
这是我如何使用现在写,没有问题
<script src="jq/jquery-2.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script>
我不得不下载源文件,而不是仅仅使用它在自举网站上快速启动的压缩文件
我有一个类似的问题。 可视化工作室看起来是受损的bootstrap.js版本。 我只是指向这个url:
<link id="active_style" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/cosmo/bootstrap.min.css">
为了完整,这里是HTML和JavaScript
<ul class="nav navbar-nav navbar-right"> <li id="theme_selector" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Theme <b class="caret"></b></a> <ul id="theme" class="dropdown-menu" role="menu"> <li><a href="#">Amelia</a></li> <li><a href="#">Cerulean</a></li> <li><a href="#">Cyborg</a></li> <li><a href="#">Cosmo</a></li> <li><a href="#">Darkly</a></li> <li><a href="#">Flatly</a></li> <li><a href="#">Lumen</a></li> <li><a href="#">Simplex</a></li> <li><a href="#">Slate</a></li> <li><a href="#">Spacelab</a></li> <li><a href="#">Superhero</a></li> <li><a href="#">United</a></li> <li><a href="#">Yeti</a></li> </ul> </li> </ul>
使用Javascript
$('#theme li').click(function () { //alert('item: ' + $(this).text()); switch_style($(this).text()); });
希望它可以帮助别人
您错过了“btn btn-navbar”部分。 例如:
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
看一下navbar文档:
Twitter Bootstrap
如果你正在使用电子或其他铬框架,你必须明确包括在窗口jquery通过:
<script language="javascript" type="text/javascript" src="local_path/jquery.js" onload="window.$ = window.jQuery = module.exports;"></script>
把下面的代码放在你的页面中
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest); function EndRequest(sender, args) { if (args.get_error() == undefined) { $('.dropdown-toggle').dropdown(); } }