Trình đơn thả xuống Twitter Bootstrap không hoạt động

Question

Tôi biết có rất nhiều câu hỏi như thế này trên Stack Overflow và tôi đã xem chúng nhưng trình đơn thả xuống của tôi vẫn không hoạt động.

Dưới đây là mã của tôi:

<div class="navbar navbar-inverse navbar-fixed-top"> 
       <div class="navbar-inner"> 
         <div class="container"> 
<ul class="nav pull-left"> 
<li><a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static">Login</a></li> 
<li class="dropdown" id="accountmenu"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">My Account<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Login</a></li> 
          <li><a href="#">Register</a></li> 
         </ul> 
        </li> 
         </div> 
       </div> 
</div> 

Có gì sai với nó?

EDIT

Vì vậy, các trình đơn thả xuống hiện đang làm việc với các câu trả lời được đưa lên câu hỏi này. Tuy nhiên nếu tôi bao gồm các kịch bản được đề cập ở trên, cửa sổ phương thức ngừng hoạt động. Và khi tôi nhận xét những mục đó, nó bắt đầu hoạt động trở lại.

Dưới đây là các mã cho cửa sổ modal của tôi:

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
    aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
      X</button> 
     <h3 id="myModalLabel"> 
      Enter your Credentials</h3> 
    </div> 
    <div class="modal-body"> 
     <form class="form-horizontal"> 
    <div class="control-group"> 
    <label class="control-label" for="inputEmail">Email</label> 
    <div class="controls"> 
    <input type="email" id="inputEmail" placeholder="Email"> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label" for="inputPassword">Password</label> 
</div> 
    </div> 
    <div class="control-group"> 
    <div class="controls"> 
    <label class="checkbox"> 
    <input type="checkbox"> Remember me 
    </label> 
    <a href="news.php" class="btn btn-primary">Login</a> 
    <a href="registration.php" class="btn btn-primary">Sign up</a> 
    </div> 
    </div> 
    </form> 
    </div> 
</div> 

Và Javascript để kích hoạt:

$('#myModal').on('hide',function(){ 
    $('.nav > li > a.modal-open-li').removeClass('modal-open-li'); 
}); 

Answer 1

Dường như làm việc tốt trong jsFiddle, đây là một ví dụ http://jsfiddle.net/2hGuv/

Bạn phải nhớ nhập tệp js. đây là mã với các tập tin sau nhập khẩu: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <ul class="nav pull-left"> 
       <li><a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static">Login</a> 

       </li> 
       <li class="dropdown" id="accountmenu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">My Account<b class="caret"></b></a> 

        <ul class="dropdown-menu"> 
         <li><a href="#">Login</a> 

         </li> 
         <li><a href="#">Register</a> 

         </li> 
        </ul> 
       </li> 
     </div> 
    </div> 
</div> 

Answer 2

Kiểm tra xem bạn có điều này trong các tập tin js: $('.dropdown-toggle').dropdown();

Kiểm tra nếu bạn có một cái gì đó như thế này với trình tự này:

<script src="jquery.js"></script> 
<script src="bootstrap.js"></script> 
<script type="text/javascript"> $(document).ready(function() { $('.dropdown-toggle').dropdown(); }); </script> 

kiểm tra điều này: Bootstrap drop-down menus and tabbable tabs on Docpad

Answer 3

Thêm tính năng này vào chức năng sẵn sàng của tôi đã khắc phục sự cố cho tôi

$('.dropdown-toggle').dropdown(); 

Answer 4

Đối với bất kỳ ai vẫn gặp sự cố này. Tôi thấy rằng tôi đã bao gồm các file bootstrap js hai lần (tôi đã chia header, cơ thể và footer tác phẩm của tôi và đã không nhận ra tôi đã bao gồm cả hai ở chân và đầu.

Có thể giúp một ai đó.

Answer 5

tôi đã có một vấn đề tương tự. Và nguyên nhân là theo thứ tự sai các file js trong thẻ đầu. trật tự đúng là jquery.min.js đầu tiên hơn bootstrap.min.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 

Answer 6

Đối với tôi đó là do thứ tự thêm tập lệnh không đúng, phải là như sau:

<script src="Scripts/jquery-1.9.1.min.js"></script> 
<script src="Scripts/bootstrap.min.js"></script> 

Answer 7

Trong trường hợp của tôi sự cố xảy ra với phiên bản jQuery. Trong bootstrap.js v3.3.6

if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 2)) { 
    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3') 
    } 

Lưu ý: 'Bootstrap \' s JavaScript đòi hỏi jQuery phiên bản 1.9.1 hoặc cao hơn, nhưng thấp hơn phiên bản 3 '

Tôi đã thay thế mã của tệp jQuery cục bộ bằng jQuery-1.11.3.js và nó bắt đầu hoạt động.

Hy vọng nó cũng sẽ phù hợp với bạn.

Answer 8

Trong trường hợp của tôi, có một thành phần trên nút thả xuống của tôi và mất quá nhiều thời gian để tôi lưu ý. Lỗi Noob, nhưng nó có thể giúp ai đó.