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

    });

我想添加功能，因此，如果您在菜單/導航之外單擊，則下拉菜單將隱藏。 此代碼的當前問題是，如果您單擊菜單，然后在菜單外部單擊，則必須再次雙擊菜單才能顯示它。 這是由於將body變量設置得太“ True”的原因。

如果您單擊菜單，然后嘗試再次單擊相同的鏈接，則嘗試使body變量嘗試解決該問題。 菜單將首先正確打開，然后關閉並再次打開。 太主要的問題是。 我的導航打開->關閉->打開

Answer 1

不要使用全局變量。 通過檢查來檢查實際元素是否可見

.is(':visible');

您可以在現有的各種選擇器上使用它。

Answer 2

我很想使用onmouseout的“現在可見”菜單作為選擇事件。

我不認為從body標簽開始運行事件不是好的方法。

流量應該是..

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