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/

- keji

---

请添加一个jsfiddle。 - Adrift

我一直在尝试，但是无法使下拉菜单响应。这是链接：http://jsfiddle.net/KF8dv/ - keji

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.
    });

- PSL

---

不错！快速解决方案。感谢您的答案！ - keji

当您为任何Bootstrap内容编写JS Fiddle时，可以使用Bootstrap的CDN路径作为外部URL。http://www.bootstrapcdn.com/ - PSL

按钮现在似乎已经通过了点击测试，而且不会消失。但是，如果我在点击之后点击其他地方，它还会再次消失。 - themhz