设置Bootstrap框架时出现问题

Question

我在为Web项目设置Bootstrap框架时遇到问题。

1-我已经下载了Bootstrap CSS和JS文件（bootstrap.css，bootstrap.js）和JQuery libray，并将这些文件添加到了我的项目中。

2-我已将文件导入到我的JSP中。

3-我编写了引导程序功能（下拉菜单），当我访问JSP时，我在Chrome控制台上看到以下内容：

Uncaught TypeError：undefined不是函数bootstrap.js：29
（匿名函数）bootstrap.js：29
（匿名函数）bootstrap.js：60

和

未捕获的TypeError：对象[object Object]没有方法'下拉'main.jsp：25
（匿名函数）main.jsp：25
jQuery.event.dispatch jquery.js：4624
elemData.handle jquery.js：4292
jQuery.event.trigger jquery.js：4533
（匿名函数）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
完成的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]没有方法“下拉”

加载东西的代码：

<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>
...

Answer 1

这不是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（最终...）

Answer 2

我很少使用它，但是据我所知，您需要按照说明在码头上说：

将下拉菜单的触发器和下拉菜单包装在.dropdown或另一个声明position：relative;的元素中。 然后添加菜单的HTML。

所以我认为您必须将其放在<div class="dropdown"> ，然后它才能工作

设置Bootstrap框架时出现问题

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-02-20 09:55:11

解决方案2
0 2014-02-20 09:55:11

设置Bootstrap框架时出现问题

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-02-20 09:55:11

解决方案2 0 2014-02-20 09:55:11

解决方案1
1 已采纳 2014-02-20 09:55:11

解决方案2
0 2014-02-20 09:55:11