Javascript onclick 下拉菜单答案

【问题标题】：Javascript onclick dropdown menuJavascript onclick 下拉菜单
【发布时间】：2012-04-13 19:55:57
【问题描述】：

我现在正在为这个 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' ofc 造成的。

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

【问题讨论】：

请在 jsfiddle.net 上添加 jsfiddle

标签： javascript jquery navigation drop-down-menu

【解决方案1】：

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

.is(':visible');

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

【讨论】：

【解决方案2】：

我很想使用“现在可见”菜单的 onmouseout 作为选择事件..

我不认为在 body 标签之外运行事件是一个好方法。

流程应该是..

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

【讨论】：