Question

我有一个div，“＃settings-icon”。当您单击“＃settings-icon”时，会显示另一个div“＃settings-drop-down-wrap”。现在，我在一个if语句中添加了一个单击事件，如果你点击“＃settings-icon”，它会隐藏“＃settings-drop-down-wrap”。但是，由于某些原因，我似乎无法让它正常工作，我不确定我可能做错了什么。

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

我的JQuery：

$(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

Try this fiddle.

$(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();
        }
    });

});

使用jquery隐藏元素

2 个答案: