Question

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

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

2 - 我在JSP上导入了文件。

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

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

和

未捕获TypeError：对象[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：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
包括jQuery 之前 Bootstrap（最后......）

Answer 2

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

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

所以我认为你必须把它放在<div class="dropdown">中，然后它才会起作用

设置Bootstrap框架时出现问题

2 个答案: