引导下拉不起作用
我无法让引导程序下拉菜单工作。 这是我的导航的HTML：
<ul class='nav'> <li class='active'>Home</li> <li class='dropdown'> <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">asds</a></li> <li class="divider"></li> </ul> </li> <li>Payday loans</li> <li>About</li> <li>Contact</li> </ul> 这里是脚本：
<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script> <script> $(document).ready(function(){ $('.dropdown-toggle').dropdown() }); </script>
我究竟做错了什么？ 感谢您的回答！
工作演示： http : //codebins.com/bin/4ldqp73
尝试这个
<ul class='nav'> <li class='active'>Home</li> <li> <div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a href="#">asds</a></li> <li class="divider"></li> </ul> </div> </li> <li>Payday loans</li> <li>About</li> <li>Contact</li> </ul>
我有同样的问题。 经过几个小时的解决之后发现，
我有
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script> <script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
代替，
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
希望这有助于某人
当我包含bootstrap.min.js两次时，我遇到了同样的问题。 删除其中一个，它开始工作。
仅供参考：如果您有bootstrap.js， 则不应该添加bootstrap-dropdown.js。
我不确定bootstrap.min.js的结果。
对于你的风格，你需要包含bootstrap的css文件，通常在</head>元素之前
<link href="css/bootstrap.css" rel="stylesheet">
接下来，您需要包含js文件，build议将它们包含在文档的末尾，通常放在</body>之前，以便加快页面的加载速度。
<script src="js/jquery.js"></script> <script src="js/bootstrap.js"></script>
你有没有包含jquery.js ？
另外，比较这行代码与你的：
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>
看到这个版本，工作正常。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Bootstrap dropdown</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <ul class="nav"> <a class="brand" href="#">w3resource</a> <li class="active"><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li class="dropdown" id="accountmenu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li class="divider"></li> <li><a href="#">JavaScript</a></li> <li><a href="#">HTML5</a></li> </ul> </li> </ul> </div> </div> </div> <div class="container-fluid"> <h1>Dropdown Example</h1> </div> <script type="text/javascript" src="js/jquery-latest.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.dropdown-toggle').dropdown(); }); </script> </body> </html>
你必须将这些文件导入到你的html的<head></head>中。
<script src="jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
在主体标签中添加以下行。
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="jquery-latest.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script>
引导程序和jquery都必须包含在内：
<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" /> <script type="text/javascript" src="/{ProjectName}/js/jquery-xxxcustom.min.js"></script> <link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" /> <script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>
注意：jquery-xxxmin.js版本必须是2.xx版本 ！
尝试在头部分
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
这里我做的是…..
刚刚从我的项目中删除bootstrap.min.js并添加bootstrap.js到它，它开始工作……..
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js" //"~/Scripts/bootstrap.min.js"));
你将不得不检查冲突的CSS文件/属性，例如你可以在其他地方的“.nav”自定义样式内容尝试禁用自己的CSS文件，并检查是否有效，然后检查哪些文件或自定义样式，使冲突也确保你的代码中包含了bootstrap.min.js
我有同样的问题，把我带到这里。
我的问题：我使用推荐的jQuery 1.12.0版本作为我的jQuery脚本文件。
解决scheme：用jquery 2.2.0版本replacejquery脚本。
这为我解决了。
我想到了，最简单的方法就是复制并通过https://www.bootstrapcdn.com/中可以find的bootstrap链接的CDN和可以在这里find的Jquery CDN脚本https：// code.jquery.com/和复制链接后，引导链接粘贴在HTML的头部和Jquery脚本粘贴在HTML的正文如下例：
<!DOCTYPE html> <html> <head> <title>Purrfect Match Landing Page</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--<link rel="stylesheet" href="griddemo.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <!-- Latest compiled and minified JavaScript --> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script src="bootstrap/3.3.7/js/bootstrap.min.js"> </script> </body> </html>
对我来说完美的希望它也适用于你:)
