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

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可以在这里找到

Answer 2

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

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

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>

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

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

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

Answer 4

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

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