Question

当用户点击箭头（.userArrow）时，我显示隐藏的菜单，当用户在容器外点击时隐藏它（.menuTrigger）

<div class="box">

              <div class="menuTrigger fRight">
                  <span class="userArrow ">filtrar ▾</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/

使用.not（）jquery选择器的意外事件

1 个答案: