jquery - 使用 jquery 隐藏元素

Question

我有一个 div，“#settings-icon”。当您单击“#settings-icon”时，会显示另一个 div，“#settings-drop-down-wrap”。现在，我在 if 语句中添加了一个 click 事件，如果您单击“#settings-icon”以外的任何位置，该事件将隐藏“#settings-drop-down-wrap”。但是，由于某种原因，我似乎无法让它正常工作，而且我不确定我可能做错了什么。

JSFIDDLE：http: //jsfiddle.net/5Zen5/

我的查询：

$(document).ready(function () {
    $("#settings-icon").click(function() {
        $("#settings-drop-down-wrap").show();
    });
    $('body').click(function (event) {
        if (event.target.id != 'settings-icon') $("#settings-drop-down-  
 wrap").hide();
    });
});

Answer 1

你想要的是停止传播，使用这个代码：

$(document).ready(function () {
    $("#settings-icon").click(function(e) {
        $("#settings-drop-down-wrap").show();
        e.stopPropagation()
    });
    $(document).click(function (event) {
        $("#settings-drop-down-wrap").hide();
    });
});

我已将事件侦听器的目标更改为document而不是主体，因为主体可能不会占据全部高度。

您的代码的问题在于目标不是#settings-icon，而是他的孩子。你的条件永远是错误的。

小提琴：http: //jsfiddle.net/5Zen5/2/

Answer 2

试试这个小提琴。

$(document).ready(function () {
    $("#settings-icon").click(function () {
        $("#settings-drop-down-wrap").show();
    });

    $(document).click(function (event) {
        if (!$(event.target).parents('#settings-icon').length > 0) {
            $("#settings-drop-down-wrap").hide();
        }
    });

});