我在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>
答案 0 :(得分:96)
检查您是否引用了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>
答案 1 :(得分:8)
这是一个Rails特定的答案,但我在Rails应用程序中的Bootstrap下拉菜单遇到了同样的问题。修复它的原因是将其添加到app / assets / javascripts / application.js:
// =需要bootstrap
希望能有所帮助。
答案 2 :(得分:5)
推出
<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>
答案 3 :(得分:2)
如果我正确地告诉你,当你说点击什么都不做时,你的意思是它没有指向你的网址吗?
在锚标记<a href>
中,您似乎没有将文件路径传递给href
属性。因此,请将#替换为您要链接的文件的实际路径。
<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>
我希望这会对您的问题有所帮助。
答案 4 :(得分:1)
我不得不下载源文件,而不只是下载用于在bootstrap网站上快速启动的压缩文件
答案 5 :(得分:1)
我有类似的问题。 visual studio似乎被软管的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());
});
希望它有助于某人
答案 6 :(得分:0)
你错过了“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>
查看导航栏文档:
答案 7 :(得分:0)
如果您使用电子或其他铬框架,则必须通过以下方式明确地在窗口中包含jquery:
<script language="javascript" type="text/javascript" src="local_path/jquery.js" onload="window.$ = window.jQuery = module.exports;"></script>
答案 8 :(得分:0)
当我查看时,我看到 display:none; 值位于 .dropdown-menu bootstrap css类中。因此我删除了它。
答案 9 :(得分:0)
双重导入jquery可能会导致错误
<script src="static/public/js/jquery/jquery.min.js"></script>
OR
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="" crossorigin="anonymous"></script>
答案 10 :(得分:-2)
将以下代码放入您的页面
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
function EndRequest(sender, args) {
if (args.get_error() == undefined) {
$('.dropdown-toggle').dropdown();
}
}