jquery-selectors - 使用 .not() jquery 选择器的意外事件

Question

当用户单击箭头 (.userArrow) 时显示隐藏菜单，当用户单击容器外部 (.menuTrigger) 时将其隐藏

<div class="box">

              <div class="menuTrigger fRight">
                  <span class="userArrow ">filtrar ▾&lt;/span>
                  <ul class="userOptionsUl dropdownMenu" style="display: none;">
                        <li><input type="text"></li>
                   </ul>
               </div>

</div>

Javascript

$(function() {

    /* el dropdown del dock*/
    $('.menuTrigger .userArrow').click(function(e) {
        e.preventDefault();
        $(this).parent().find('.dropdownMenu').show();
        e.stopPropagation();
    });
    $('body').not('.menuTrigger').click(function() { /* cambiar por la otra clase que tiene*/
        $('.dropdownMenu').hide();
        console.log('yo lo he escondido');
    });

});

http://jsfiddle.net/5VQXg/

我的问题是，当用户单击以显示隐藏菜单然后单击以输入输入时。菜单被隐藏。

所有点击都在 .menuTrigger （或孩子）内的东西

问题是，为什么 $('body').not('.menuTrigger').click()当所有点击都在这个容器的孩子中时？

Answer 1

您的代码正在做的是过滤掉任何menuTrigger不存在的带有类的 body 元素。

您实际需要做的是检查被单击的元素 ( e.target) 是否在 menuTrigger 内，如果是，则不要运行代码：

$('body').click(function(e) { /* cambiar por la otra clase que tiene*/
    // If the clicked element is not inside menuTrigger div hide the menu
    if (!$(e.target).closest('.menuTrigger').length) {
        $('.dropdownMenu').hide();
        console.log('yo lo he escondido');
    }
});

http://jsfiddle.net/5VQXg/3/