2013-03-09 2 views
1

자바 스크립트 파일을 검사했는데 모두 정상적으로 작동한다고 생각합니다. 그러나 나는 아무것도 드롭 다운하지 않습니다.작동하도록 부트 스트랩 드롭 다운을 가져올 수 없습니다.

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script> 

... 
     <div class="span3"><center>  
     <a href="#" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Buy A Contract</a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Hello World</a></li> 
      <li><a href="#">Why am I not seeing this?</a></li> 

     </ul> 
     </div> 

     </center> 
     </div> 
... 
+0

그래도 문제가 있습니까? 부트 스트랩과 같은 플러그인보다 먼저 jquery가로드되었는지 확인하십시오. 다른 모든 것은 괜찮아 보입니다. –

+0

내 구조도 약간 벗어났습니다. jQuery가 포함 된 후에는 브라우저 하단에 팝업 창이 나타납니다. 나는 그것을 모두 소진 시켰다고 생각한다. –

답변

1

Jquery는 페이지의 다른 모든 스크립트보다 먼저 선언해야합니다. 헤더에서 는 : 모든 스크립트 전에

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

를 아래 줄을 삽입하지만 당신은 또한 드롭 다운 메뉴를 만들 수있는 잘못된 구문이 있습니다. 다음과 같아야합니다.

 <ul class="nav"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> <!-- this is the item where your dropdown menu will popup--> 
      <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a> 

     <ul class="dropdown-menu"><!-- your drop-down -menu--> 
      <li><a href="#">nav1</a> 
      </li> 
      <li><a href="#">nav2</a> 
      </li> 
     </ul><!-- dropdown menu ends--> 
     </li><!-- li with dropdown ends--> 
    </ul><!-- Main nav ends--> 
2

jQuery 참조가없는 것처럼 보입니다.

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script> 

당신이 bootstrap-dropdown.js을 참조 할 필요가 없습니다가 (최소 파일이 모든 플러그인을 포함) : 또한, 이후이 포함되어 있습니다.

편집 :

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script> 
:

명확하게하기 위해, 당신이 어딘가에 부트 스트랩 참조하기 전에 jQuery 라이브러리의 사본을 가리키는 스크립트 태그가 필요하므로 머리가 비슷해야

이전 버전의 Bootstrap에 링크하고 있으므로 jQuery 버전을 되돌려 야 할 수도 있습니다. 부트 스트랩 소스에서 오류가 발생하는 경우 jQuery 버전을 1.8.3으로 변경하십시오.

+1

내가 누락 된 jQuery 파일이 있습니까? –

+1

@ChaseRoberts 예 - 부트 스트랩은 jQuery를 기반으로하므로 부트 스트랩 스크립트 참조 앞에 포함시켜야합니다. –

관련 문제