点击时停止只关闭一个下拉菜单切换

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代码，但我无法弄清楚。

感谢任何帮助。

- denislexic

Answer 1

问题在于 Bootstrap 的下拉菜单 jQuery 插件会在点击其他地方时关闭下拉菜单。您可以通过捕获下拉菜单元素上的单击事件并阻止其到达 body 元素上的单击事件监听器来禁用此行为。

只需添加：

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

可以在这里找到 jsfiddle。

- CraigTeegarden

---

太棒了，我稍微调整了一下，因为我只需要一些下拉菜单而不是正常的行为，通过给它添加一个类，并在你的代码中检查它来实现...如果感兴趣可以看看这个fiddle。http://jsfiddle.net/denislexic/8afrw/8/ - denislexic

你也可以仅阻止特定类别的点击事件，以便正常的下拉菜单不受影响。js fiddle here - CraigTeegarden

这是一个好答案。我用了它，但遇到了一个问题。对于那些有一些额外时间的人来说，阅读这篇文章可能会很有趣：http://css-tricks.com/dangers-stopping-event-propagation/ - yaserso

如果您想处理下拉菜单中子元素的点击事件，可以参考以下更好的答案：https://dev59.com/Vl8f5IYBdhLWcg3wD_Av - Fatmuemoo

如果您想禁用下拉框的所有自动关闭功能，只需关闭监听器。$('html').off('click.dropdown') - Amr Hossam

但是我的 href 有 #archor，我该如何防止它添加到 URL 中？ - huykon225

Answer 2

我知道这个问题与 Angular 本身无关，但是对于使用 Angular 的人来说，你可以通过 $event 将事件从 HTML 传递并停止传播：

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

- parliament

---

议会，非常好的回答！我想知道如何捕捉菜单外的点击... - Urigo

你真是救星啊。非常感谢你。 - sfendell

Answer 3

实际上，如果你在使用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>

如果您想停止多个鼠标事件的传播，特别是在IT技术方面：

...
element.click(function(e) {
    e.stopPropagation();
});

element.mousedown(...
element.mouseup(...
...

- Nahn

Answer 4

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

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

- Hassan Talha

Answer 5

在尝试了许多技术后，我发现最好使用的一种技术不会带来任何副作用，而且甚至很简单：

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

这使得您也可以在下拉菜单内的内部元素上进行一些实时绑定。

- Julian Xhokaxhiu

---

最适合我的解决方案 - Caleb Pitman

Answer 6

我遇到了一个问题，但是它发生在一个React组件中 - 这个React组件位于一个带有表单的Bootstrap下拉菜单中。每次单击下拉菜单中的元素时，它都会关闭，导致无法输入任何表单内容。

通常的e.preventDefault()和e.stopPropagation()在React应用程序中无法正常工作，因为jQuery事件会立即触发，而React则试图在此之后进行干预。

以下代码使我解决了我的问题。

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

或者以ES6格式

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

希望这对那些在尝试在React中使用其他答案时遇到困难的人有所帮助。

- Sprose

Answer 7

此外，除非点击按钮元素，否则防止点击操作

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

- Elise Chant