Question

目前我正在努力解决这个问题。

$(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变量设置得太'真'而造成的。

如果您单击菜单，我会使用body变量尝试解决问题 - 然后再次单击相同的链接。菜单首先会正确打开，然后再次关闭再打开。 Soo的主要问题是。我的导航打开 - ＆gt;关闭 - ＆gt;开

Answer 1

不要使用全局变量。通过检查

检查实际元素是否可见

.is(':visible');

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

Answer 2

我很想使用'now visible'菜单的onmouseout作为首选事件..

我不认为从身体标签上运行事件是一个很好的方法。

流程应该是..

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

Javascript onclick下拉菜单

2 个答案: