我在为Web项目设置Bootstrap框架时遇到问题。
1-我已经下载了Bootstrap CSS和JS文件(Bootstrap.CSS，Bootstrap.JS)和JQuery库，并将这些文件添加到我的项目中。
2-我已经导入了JSP上的文件。
3-我编码了一个引导程序功能(下拉菜单)，当我访问JSP时，我在Chrome控制台上看到以下内容：
Unaught TypeError：undefined不是函数引导程序。js:29
(匿名函数)引导程序。js:29
和
未捕获类型错误：Object〔Object Object〕没有方法"dropdown"main。jsp:25
(匿名函数)main。jsp:25
jQuery.event.dispatch jQuery.js:4624
elemData.handle jQuery.js:4292
jQuery.event.trigger jQuery.js:5453
<(匿名函数jquery.js:5234>
jquery.extend.ready jquery.js:3427
已完成jquery.js:3453
在我的JSP上有：
<li class="dropdown" style="clear: both; float: left; width: 106px; margin: 0 8px 35px 0; text-align: center;">
<a id="drop1" href="" tabindex="100" role="button" class="dropdown-toggle" data-toggle="dropdown">
<img src="img/100x100.gif">
<b class="main-font"> Test </b>
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="">XXX</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="">YYY</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="">ZZZ</a></li>
</ul>
这里的问题是，无论我做什么，它总是出现：
Object[Object Object]没有方法"下拉">
加载东西的代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- CSS -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<!-- JS & JQuery --->
<script src="js/bootstrap.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<title>Test </title>
</head>
和：
<body>
<script type="text/javascript">
$(function(){
$('#drop1').dropdown();
});
</script>
...
这不是Bootstrap问题，而是jQuery问题。
您不能在HTML属性中直接使用jQuery，它需要等待文档(以及jQuery本身)被加载。
相反，使用以下HTML:
<!-- removed onfocus -->
<a id="drop1" href="" tabindex="100" role="button" class="dropdown-toggle" data-toggle="dropdown">
<img src="img/100x100.gif">
<b class="main-font"> Test </b>
<b class="caret"></b>
</a>
这个JS:
$(document).on('ready', function(event) {
$('#drop1').dropdown();
});
作为旁注：
- 不包括
bootstrap.css和bootstrap.min.css(仅限缩小版) - 不要同时包含
bootstrap.js和bootstrap.min.js(仅限缩小版) - 如果可能，请使用最新版本的Bootstrap
- 在引导之前包含jQuery(最终…)
我很少使用它，但据我所知，你需要按照说明操作，在码头上它说：
将下拉菜单的触发器和下拉菜单包装在.downdown中，或声明位置的另一个元素：relative；。然后添加菜单HTML。
所以我认为你必须把它放在<div class="dropdown">中，然后它就会工作