引导 – 下拉菜单不工作?

我在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(); } }