jquery - Bootstrap 下拉菜单在输入选择时消失

Question

我有一个 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/

Answer 1

请看这个:- 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.
    });