Javascript onclick 下拉菜单

Question

我现在正在为这个JavaScript而苦苦挣扎。

$(document).ready(function () {
        var visible = false;
        var body = false;
        $("body").mouseup(function () {
            if (visible) {
                $(this).parent().find("ul.subnav").slideUp('slow');
                visible = false;
                $(this).removeClass("clicked-background");
                body = true;
            }
        });
        $("ul.topnav li a").click(function () { //When trigger is clicked...
            var menu = $(this).parent().find('ul.subnav');
            if (!visible && !body) {
                $(this).parent().find("ul.subnav").slideDown('fast').show();
                visible = true;
                $(this).addClass("clicked-background");
            }
            // else if (visible) 
            //{
            //   $(this).parent().find("ul.subnav").slideUp('slow');
            //   visible = false;
            //   $(this).removeClass("clicked-background");
            // }
            body = false;
        });
    });

我想添加该功能，因此如果您在菜单/导航外部单击，下拉菜单将隐藏。此代码的当前问题是，如果您单击菜单，然后在菜单外部单击-您必须再次双击菜单才能显示它。这是由于主体变量设置得太"真"ofc引起的。

如果您单击菜单，我制作了 body 变量以尝试解决问题 - 然后再次单击同一链接。菜单将首先正确打开，然后关闭并再次打开。所以主要问题是。我的导航打开 ->关闭 ->打开

Answer 1

不要使用全局变量。通过检查检查实际元素是否可见

.is(':visible');

您可以在现在拥有的各种选择器上使用它。

Answer 2

我会很想使用"现在可见"菜单中的onmouseout作为选择的事件。

我不认为从身体标签中运行事件是好方法。

流程应该是..

click (menu button or link)
show menu
set onmouseout for button and menu on click
onmouseout, remove onmouseout events