Javascript 只需停止一个下拉切换，即可在单击时关闭

我有一个按钮下拉列表（只有一个，不是全部），在它里面，我想有几个输入字段，人们可以在其中键入内容，而不必在你点击它时隐藏下拉列表（但如果你点击它的外部，它会关闭）

我创建了一个JSFIDLE：

下面是代码，它是基本的：

<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，但我无法理解

---

谢谢你的帮助

问题在于，当您单击其他任何位置时，boostrap下拉jQuery插件会关闭已删除的菜单。您可以通过捕获下拉菜单元素上的单击事件并阻止其到达body元素上的单击事件侦听器来禁用该行为

加上

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

---

JSFIDLE可以找到

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

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

内容示例

在尝试了许多技术之后，我发现最好的一种方法是使用，它不会带来任何缺点，甚至很简单：

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

---

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

此外，禁止单击，除非单击按钮元素

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

---

事实上，如果您在Angular.js中，为它制定一个指令会更优雅：

app.directive('stopClickPropagation', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            element.click(function(e) {
                e.stopPropagation();
            });
        }
    };
});

然后，在下拉菜单上，添加指令：

<div class="dropdown-menu" stop-click-propagation> 
    my dropdown content...
<div>

---

另一个快速解决方案是，只需将

onclick

属性添加到具有类的div

下拉菜单中即可：

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

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

通常的
e.preventDefault（）
和
e.stopPropagation（）
在react应用程序中不起作用，因为jquery事件被立即触发，react试图在此之后进行干预

下面的代码允许我修复我的问题

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

或ES6格式

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

希望在react中使用它时，这能对任何与其他答案有冲突的人有用。
令人惊讶的是，我对它进行了一些调整，因为我只需要一些下拉列表来避免正常行为，向它添加一个类，并在代码中检查它……如果有兴趣，请参阅fiddle。您也只能阻止对特定类的单击，因此不必使用常规下拉菜单。这是一个很好的答案。使用了它，但遇到了问题。对于那些手头有一些额外时间的人来说，读这篇文章可能会很有趣：如果你想处理下拉列表中孩子们的点击事件，最好的答案是如果你想禁用下拉列表的所有自动关闭功能，你可以禁用侦听器$（'html'）.off（'click.dropdown'）议会，回答得很好！我想知道你怎么能抓住菜单外的点击……你是个救命恩人。非常感谢。这是我最好的解决方案
stopPropagation(e){
    e.nativeEvent.stopImmediatePropagation();
}