Trình đơn thả xuống Bootstrap biến mất trên đầu vào chọn

Question

Tôi có một menu thả xuống Bootstrap mà tôi dự định sử dụng để đăng nhập. Nó xuất hiện tốt nhưng khi tôi chọn tên người dùng nput nó biến mất kể từ khi tập trung đã đi đến đầu vào. Làm thế nào tôi sẽ đi về việc thêm hỗ trợ cho các yếu tố đầu vào hoặc là có một phương pháp làm việc cho việc này?

mã hiện tại của tôi là:

<li id="fat-menu" class="dropdown"> 
     <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Login <b class="caret"></b></a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> 
      <li role="presentation"><input name="username" type="text" placeholder="Username" /></li> 
      <li role="presentation"><input name="password" type="password" placeholder="Password" /></li> 
      <li role="presentation" class="divider"></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Login</a></li> 
      </ul> 
    </li> 

nỗ lực của tôi tại jsfiddle. Tôi couldnt được thả xuống để làm việc tại tất cả: http://jsfiddle.net/KF8dv/

Answer 1

Vui lòng xem: - http://jsfiddle.net/b8769/

Bạn cần phải ngăn chặn sự kiện thả xuống khi nhấp vào hộp văn bản đầu vào. Bạn có thể đạt được điều này bằng cách sử dụng javascript. stopPropagation

$('.dropdown-menu input').click(function(e) { 
     e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes. 
    });