javascript - 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

我假设这是由 Event Bubbling 引起的..

当您的代码“点击”#addDashWidgetBox 时，它也会导致 body 被点击，从而使您陷入无限循环。

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

不要模拟用户输入(通过手动 .click() )，而是更明确

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