트위터 부트 스트랩 navbar 드롭 다운

트위터 부트 스트랩 드롭 다운 내비게이션 작업에 몇 가지 문제가 있습니다. 나는 수많은 튜토리얼을 훑어 보았고 거기에서 코드를 복사하면 나에게 적합하지 않다. 콘솔에서 나는 다음과 같은 오류를 얻을트위터 부트 스트랩 navbar 드롭 다운

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>

페이지가로드까지, 하지만 필터 메뉴 항목을 클릭하면 위에서 언급 한 예외가 발생하고 아무 일도 발생하지 않습니다.

출처

2012-12-28 Pio

자바 스크립트가 포함 된 순서를 변경해야합니다. 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>

편집 이유 : 자바 스크립트가로드되는 즉시 실행됩니다. bootstrap-dropdown.js가 파싱 될 때 jQuery가 이미로드되어 있어야합니다. 그런 식으로 jQuery 기능을 bootstrap-dropdown에 사용할 수 있습니다.

출처

2012-12-28 15:47:38 ppetrid

감사합니다. 문제가 해결되었습니다. – Pio

트위터 부트 스트랩 navbar 드롭 다운

답변

관련 문제