Html Bootstrap - 下拉菜单不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9529574/
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
Bootstrap - dropdown menu not working?
提问by theeggman85
My dropdown menu in Bootstrap doesnt appear to be working - can anyone alert me to the problem? Right now it displays the dropdown, but clicking it does nothing. Thanks!
我在 Bootstrap 中的下拉菜单似乎不起作用 - 任何人都可以提醒我这个问题吗？现在它显示下拉菜单，但单击它什么也不做。谢谢！
JS:
JS：
$(document).ready( function() {
$('.dropdown-toggle').dropdown();
});
HTML:
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>
采纳答案by Tawshif Ahsan Khan
If I am getting you correctly, when you say that clicking does nothing, do you mean that it does not point to your URL?
如果我的意思是正确的，当你说点击什么都不做时，你的意思是它没有指向你的网址吗？
In the anchor tag <a href>it looks like you did not pass your file path to the hrefattribute. So, replace the #with your actual path for the file that you want to link.
在锚标记中<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>
I hope this helps with your issue.
我希望这对您的问题有所帮助。
回答by djGrill
Check if you're referencing jquery.jsBEFOREbootstrap.jsandbootstrap.jsis loaded only once. That fixed the same error for me:
检查您是否引用jquery.jsBEFOREbootstrap.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>
回答by jimbonk
This is a Rails specific answer, but I had this same problem with Bootstrap dropdown menus in my Rails app. What fixed it was adding this to app/assets/javascripts/application.js:
这是 Rails 特定的答案，但我的 Rails 应用程序中的 Bootstrap 下拉菜单也遇到了同样的问题。修复它的是将它添加到 app/assets/javascripts/application.js 中：
//= require bootstrap
//= 需要引导程序
Hope that helps someone.
希望能帮助某人。
回答by Tawshif Ahsan Khan
putting
推杆
<script src="js/bootstrap.min.js"></script>
file at the last after the
文件在最后
<script src="jq/jquery-2.1.1.min.js"></script> solved this problem for me .
this is how i use write it now and no problem
这就是我现在使用的写法，没问题
<script src="jq/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
回答by cubeloid
I had to download the source files instead of just the compressed files that it says to use for quick start on the bootstrap website
我必须下载源文件，而不仅仅是它所说的用于在引导程序网站上快速启动的压缩文件
回答by mark1234
I had a similar problem. The version of bootstrap.js that visual studio seems to be hosed. I just pointed to this URL instead:
我有一个类似的问题。视觉工作室似乎被灌输的 bootstrap.js 版本。我只是指向这个 URL：
<link id="active_style" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/cosmo/bootstrap.min.css">
For completeness, here's the HTML and javascript
为了完整起见，这里是 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
Javascript
$('#theme li').click(function () {
//alert('item: ' + $(this).text());
switch_style($(this).text());
});
Hope it helps someone
希望它可以帮助某人
回答by sogu
Double importing jquery can cause Error
双重导入jquery会导致错误
<script src="static/public/js/jquery/jquery.min.js"></script>
<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>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="" crossorigin="anonymous"></script>
回答by mm_
If you are using electron or other chromium frame, you have to include jquery within window explicitly by:
如果您使用的是电子或其他铬框架，则必须通过以下方式在窗口中显式包含 jquery：
<script language="javascript" type="text/javascript" src="local_path/jquery.js" onload="window.$ = window.jQuery = module.exports;"></script>
回答by Kevin
When i checked i saw display: none;value is in the .dropdown-menubootstrap css class. Hence i removed it.
当我检查时，我看到显示：无；值在.dropdown-menubootstrap css 类中。因此我删除了它。
回答by Jose
you are missing the "btn btn-navbar" section. For example:
你错过了“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>
Take a look to navbar documentation in:
查看以下导航栏文档：
