我在为我的 Web 元素设置 Bootstrap 框架时遇到问题。
1 - 我已经下载了 Bootstrap CSS 和 JS 文件(bootstrap.css、bootstrap.js)和 JQuery 库并将这些文件添加到我的元素中。
2 - 我已将文件导入我的 JSP。
3 - 我编写了一个 Bootstrap 功能(下拉菜单)，当我访问 JSP 时，我在 Chrome 控制台上看到以下内容:
Uncaught TypeError: undefined is not a function bootstrap.js:29
(anonymous function) bootstrap.js:29
(anonymous function) bootstrap.js:60
和
Uncaught TypeError: Object [object Object] has no method 'dropdown' main.jsp:25
(anonymous function) main.jsp:25
jQuery.event.dispatch jquery.js:4624
elemData.handle jquery.js:4292
jQuery.event.trigger jquery.js:4533
(anonymous function) jquery.js:5235
jQuery.extend.each jquery.js:384
jQuery.fn.jQuery.each jquery.js:137
jQuery.fn.extend.trigger jquery.js:5234
jQuery.extend.ready jquery.js:3427
completed 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] 没有方法 'dropdown'
加载内容的代码:
<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如果可能的话
- 在 Bootstrap 之前包含 jQuery(最后...)
关于javascript - 设置 Bootstrap 框架的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21897615/