javascript - 仅停止一个下拉切换关闭点击

Question

我有一个下拉按钮(只有一个，不是全部)，在里面，我想有几个输入字段，人们可以在里面输入内容，而不会在您单击它时立即隐藏下拉列表(但它如果您在其外部单击，它确实会关闭)。

我创建了一个 jsfiddle:http://jsfiddle.net/denislexic/8afrw/2/

这是基本的代码:

<div class="btn-group" style="margin-left:20px;">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
      <li>Email<input type="text" place-holder="Type here" /></li>
      <li>Password<input type="text" place-holder="Type here" /></li>
  </ul>
</div>​

所以基本上，我不希望它在单击下拉菜单时关闭(但在单击操作按钮或在下拉菜单外时关闭)。到目前为止，我最好的猜测是向它添加一个类并尝试做一些 JS，但我无法弄清楚。

感谢您的帮助。

Answer 1

问题是当您单击其他任何地方时，boostrap 下拉 jQuery 插件会关闭下拉菜单。您可以通过捕获下拉菜单元素上的点击事件并阻止它到达 body 元素上的点击事件监听器来禁用该行为。

只需添加

$('.dropdown-menu').click(function(event){
     event.stopPropagation();
 });​

可以找到jsfiddle here