設置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