Lista rozwijana Bootstrap znika na wejściu wybierz

Question

Mam menu rozwijane Bootstrap, którego planuję użyć do logowania. Wydaje się być w porządku, ale gdy wybiorę nazwę użytkownika, znika on, ponieważ fokus został przesunięty na dane wejściowe. W jaki sposób chciałbym dodać wsparcie dla danych wejściowych lub czy istnieje na to działająca metoda?

Mój obecny kod jest:

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

Moja próba jsfiddle. Nie mogłem dostać listę rozwijaną do pracy w ogóle: http://jsfiddle.net/KF8dv/

Answer 1

proszę zobaczyć: - http://jsfiddle.net/b8769/

Trzeba zapobiec rozwijaną zdarzenie po kliknięciu na polach tekstowych wejściowego. Możesz to osiągnąć, używając 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. 
    });