Twitter bootstrap導航欄下拉框

Question

我在使用twitter bootstrap下拉導航欄工作時遇到了一些問題。我遇到了大量的教程，如果我從那裏複製代碼，它不適合我。在控制檯中我得到以下錯誤

TypeError: $ is undefined 
var old = $.fn.dropdown 

這裏是我的代碼：

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span8"> 
      <!--Body content--> 
      <div class="navbar"> 
       <div class="navbar-inner"> 
        <ul id="tab" class="nav"> 
         <li class="active"><a href="#Tab1" data-toggle="tab">Recent</a></li> 
         <li><a href="#Tab2" data-toggle="tab">Top</a></li> 
         <li><a href="#Tab3" data-toggle="tab">Near you</a></li> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Filters <b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Filter1</a></li> 
           <li><a href="#">Filter2</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div class="span4"> 
      <!--Sidebar content--> 
     </div> 
    </div> 
</div> 

，這裏是我的包括 - 它們載入時沒有問題：

<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen"> 
    <script type="text/javascript" src="bootstrap/js/bootstrap-dropdown.js"></script> 
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 

該頁面加載，但是當我點擊Filters菜單項時，它會拋出上面提到的異常並沒有任何反應。

Answer 1

您必須更改包含javascripts的順序。 JQuery必須在引導之前。

<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen"> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="bootstrap/js/bootstrap-dropdown.js"></script> 

編輯的原因：JavaScript是一旦它被加載執行。在解析bootstrap-dropdown.js時，jQuery應該已經被加載了。這樣jQuery的功能將可用於引導下拉。