2013-04-17 80 views
6

我有一個Bootstrap下拉菜單,我打算用於登錄。它看起來很好,但是當我選擇用戶名輸入時,它消失了,因爲焦點已經到了輸入。我會如何着手增加對輸入的支持或者是否有一種工作方法?引導下拉選項消失輸入選擇

我當前的代碼是:

<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> 

我在的jsfiddle嘗試。我不能讓下拉在所有的工作:http://jsfiddle.net/KF8dv/

+0

請加[的jsfiddle(http://jsfiddle.net) – Adrift

+0

我是想,但不能得到下拉到respond.Heres鏈接:http://jsfiddle.net/KF8dv/ – kezi

回答

12

請看到這一點: - http://jsfiddle.net/b8769/

您需要輸入文本框單擊時,防止下落事件。你可以通過使用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. 
    }); 
+0

不錯!快速解決。感謝你的回答! – kezi

+0

任何時候..看看這是否可行在您的應用程序... – PSL

+1

當你寫任何引導的東西你可以使用引導程序的CDN路徑作爲外部url的js小提琴.. http://www.bootstrapcdn.com/ – PSL