46

我有一个按钮下拉列表（只有一个，不是全部），在其中，我想要几个输入字段，人们可以在其中输入内容，而不会在您单击它时立即隐藏下拉列表（但如果你在它外面点击）。

我创建了一个 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，但我想不通。

谢谢你的帮助。

4

7 回答 7

112

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

只需添加

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

jsfiddle 可以在这里找到

于 2012-07-23T17:41:12.480 回答
39

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

<div ng-click="$event.stopPropagation();">
    <span>Content example</span>
</div>
于 2014-02-07T18:38:04.277 回答
5

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

特别是如果您想停止多个鼠标事件的传播：

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

element.mousedown(...
element.mouseup(...
...
于 2015-11-23T21:25:31.697 回答
5

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

<div class="dropdown-menu" onClick="event.stopPropagation();">...</div>
于 2016-06-13T06:54:59.057 回答
1

在尝试了很多技术之后，我发现最好的一种，它不会导致任何缺点，这甚至很简单：

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

这使您还可以对下拉列表中的内部元素进行一些实时绑定。

于 2014-10-23T13:57:35.963 回答
0

此外，除非单击按钮元素，否则防止单击

$('.dropdown-menu').click(function(e) {
    if (e.target.nodeName !== 'BUTTON') e.stopPropagation();
});
于 2014-12-12T00:30:42.823 回答
0

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

由于立即触发 jquery 事件并在此之后尝试进行干预，因此通常不会在 react 应用程序中e.preventDefault()工作。e.stopPropagation()

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

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

或 ES6 格式

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

希望这对任何在尝试将其用于反应时挣扎于其他答案的人有用。

于 2017-11-08T10:57:24.017 回答