jQuery 或 Javascript 沿着隐藏元素（如果单击正文其他位置时可见）

Question

当有人单击网站上的其他位置时，我试图关闭临时下拉菜单。仅当发现它已打开时。然而，下面的代码片段似乎失火并锁定浏览器。所以我认为我的做法是错误的。有没有更好的方法来处理这个概念？

$(document.body).click(function() {
    if($('#ztsWidgetMenu').is(':visible'))
    {   
        $('#addDashWidgetBox').click();
    }
});

编辑

我创建了一个函数来触发单击事件，以便元素打开它，并且主体单击调用，冒泡随之停止，但是我现在遇到了另一个问题。为了打开菜单，我需要单击菜单项至少两次才能打开菜单。如果我点击同一个按钮来关闭它，那么我就会一直保持打开状态，除非我点击现在其他地方的正文。

function openCloseWidgetMenu()
{
        dashboardJSON.widgets.sort(sortJSONresultsByWidgetID);  
        if(widgetMenuShowHide == "hide")
        {
            widgetMenuShowHide = "shown";
            $.each(dashboardJSON.widgets, function(x)
            {
                if(dashboardJSON.widgets[x].show == "no"){$('#ztsWidgetMenu ul').append('<li class="widgetMenuItems" rel="'+dashboardJSON.widgets[x].wigetID+'" widgetcolor="'+dashboardJSON.widgets[x].widgetColor+'">'+dashboardJSON.widgets[x].widgetTitle+'</li>');}
            });
            $('#ztsWidgetMenu').css({"display":"block", "position":"absolute", "left":($('#addDashWidgetBox').position().left-35) + "px", "top":($('#addDashWidgetBox').offset().top+$('#addDashWidgetBox').height()+10) + "px"});
        }
        else
        {
            $('#ztsWidgetMenu ul li').remove();
            $('#ztsWidgetMenu').hide();
            widgetMenuShowHide = "hide";
        }
}
$('#addDashWidgetBox').live({
    click: function()
    {
        //e.preventDefault();
        openCloseWidgetMenu();
    },
    mouseover: function()
    {
        $('#addWidetMenuBar').css({"background-position":"-0px -697px"});
        $(this).css({"color":"#000"});
    },
    mouseout: function()
    {
        $('#addWidetMenuBar').css({"background-position":"-0px -662px"});
        $(this).css({"color":"#5a5a5a"});
    }
});

$(document.body).click(function() {
    if($('#ztsWidgetMenu').is(':visible'))
    {   
        openCloseWidgetMenu();
    }
});

编辑2

我已经解决了大部分问题，除了现在..当我单击该元素时，我想触发该功能以显示菜单，主体单击同时注册，因此现在只需单击一下即可触发相同的功能两次。

Answer 1

我假设这是由 事件冒泡 引起的..

当 #addDashWidgetBox 被你的代码“点击”，它也会导致 body 被点击，这会让你陷入无限循环。

只是更具体地说明您想要发生的事情...

而不是模拟用户输入（通过您的手册 .click() ），只需更明确

$(document.body).click(function() {
    if($('#ztsWidgetMenu').is(':visible'))
    {   
        //Call functions being fired by the simulated click directly...
    }
});

Answer 2

我会尝试将以下内容放入 ztsWidgetMenu 的 onBlur 事件

if($('#ztsWidgetMenu:visible')) {
    $('#ztsWidgetMenu').hide();
}

或类似的事件中。 jQuery 选择器仅在它可见时才会选择它。