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元素上的click事件侦听器来禁用该行为。

添加

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

可以找到jsfiddle here

Answer 2

我知道这个问题不适用于Angular本身，但对于使用Angular的任何人，您可以从HTML传递事件并通过$ event停止传播：

<div ng-click="$event.stopPropagation();">
    <span>Content example</span>
</div>

Answer 3

另一种快速解决方案，只需将onclick属性添加到具有类dropdown-menu的div：

<div class="dropdown-menu" onClick="event.stopPropagation();">...</div>

Answer 4

在尝试了很多技术后，我发现使用的最好的技术，没有任何缺点，甚至很简单：

$(document)
.on( 'click', '.dropdown-menu', function (e){
    e.stopPropagation();
});

它还允许您对下拉列表中的内部元素进行一些实时绑定。

Answer 5

另外，除非点击按钮元素

，否则请阻止点击

$('.dropdown-menu').click(function(e) {
    if (e.target.nodeName !== 'BUTTON') e.stopPropagation();
});

Answer 6

我遇到了这个问题但是在一个反应组件中 - 反应组件位于带有表单的bootstrap下拉菜单中。每次单击下拉列表中的元素时，它都会关闭，导致在表单中输入任何内容时出现问题。

通常e.preventDefault()和e.stopPropagation()在反应应用中不起作用，因为jquery事件会立即被触发并在此之后做出干预。

以下代码允许我解决我的问题。

stopPropagation: function(e){
    e.nativeEvent.stopImmediatePropagation();
}

或ES6格式

stopPropagation(e){
    e.nativeEvent.stopImmediatePropagation();
}

希望这对于在尝试使用它时做出其他答案的人来说是有用的。

从关闭点击停止只有一个下拉切换

6 个答案: