Question

我创建了一些代码，当点击div（“按钮”）时，它会隐藏/取消隐藏隐藏的div。我还希望在点击屏幕上的任何位置时隐藏div。这些代码似乎彼此冲突。

$(document).ready(function () {

    $(document).on("click", "#help-icon", function () {
        console.log('hi');
        $("#help-menu").toggle();
    });

    $(document).mouseup(function (e) {
        var hlpcont = $("#help-menu");
        if (!hlpcont.is(e.target) && 
            hlpcont.has(e.target).length === 0) {
            hlpcont.hide();
        }
    });

});

jsfiddle：http://jsfiddle.net/CEs4c/1/

Answer 1

$(document).click(function (eventObj) {
    if (eventObj.target.id != "help-icon") {
        $("#help-menu").hide();
    } else {
        $("#help-menu").toggle();
    }
});

编辑：如果你想点击出现的div而不再隐藏它：

$(document).click(function(eventObj)
{
    if (eventObj.target.id == "help-icon") {
        $("#help-menu").toggle();
    } else if($(eventObj.target).hasClass("help-dropdown"))  {
        $("#help-menu").show();
    } else {
        $("#help-menu").hide();
    }


});

Answer 2

在我的测试中，mouseup函数在click函数之前触发。 mouseup函数检查事件的目标。当您单击按钮时，mouseup事件的目标是按钮，因此mouseup函数隐藏div，然后单击函数将触发并将div切换回可见。

我要做的只是在mouseup中检查事件的目标并跳过click事件：

$(document).mouseup(function (e)
    {
        var hlpcont = $("#help-menu");
        var hlpIcon = $("#help-icon");
        if(hlpIcon.is(e.target)){
            hlpcont.toggle();
        }else
            {
              hlpcont.hide(); 
            }

    });

Jquery div正确打开/关闭隐藏的div

2 个答案: