Question

所以我正在处理这个简单的脚本，当你在它外面点击它时，它应该隐藏任何对象。

以下是jsFiddle和我的简单代码：

HTML

<div class="container">
    Click anywhere in this div

    <div style="border:1px solid blue; float:right;">div should still open/close</div>
</div>

<div class="close_me">Close me!</div>

JS

$(".container").click(function(){
    $(".close_me").toggle();
});


helper_close(".close_me", ".container");

//this is simplified example of my function
function helper_close(target, avoid){
    //note that this function will be called once per object
    //so it should be fine to bind new event on document
    $(document).on("click", function(event){

        if( $(event.target).is(avoid) )
            return true;

        $(target).hide();
    });
}

现在你可以看到它有效，（有点）问题是close_me当你点击container内的任何地方时也应该出现/消失，正如你所看到的那样现在就发生了。

我知道我可以指定我想要“避免”的每个对象，但是如果我在该容器内有20个div呢？好吧，代码看起来很难看......所以我需要一些更好的方法来做到这一点。

Answer 1

只需检查点击的元素是否在与“避免”选择器匹配的链上某处有父级，否则，隐藏：

$(document).on("click", function(event){
    if(! $(event.target).closest(avoid).length ) $(target).hide();
});

FIDDLE

Jquery菜单更近了

1 个答案: