显示菜单/div onclick 或 onmouseover 不是简单的方法答案

【问题标题】：Show menu/div onclick or onmouseover not the easy way显示菜单/div onclick 或 onmouseover 不是简单的方法
【发布时间】：2010-04-23 12:42:14
【问题描述】：

我正在尝试制作一个可以折叠的菜单：

如果您单击按钮 div，即使您将鼠标悬停在按钮 div 上，菜单也会显示并保留。
如果再次单击按钮 div，菜单将隐藏。
当菜单隐藏 onmouseenter 或 mouseover 时，它会显示 onmouseleave 或 mouseout 它藏起来了。

我做不到，这是我的代码：

        $(function() {
        $('#arrow').bind('mouseenter', function(){
            if($('#hoofdmenu').attr("class") == "show"){
            $('#hoofdmenu').addClass("class", "mousehide"); 
            $('#hoofdmenu').hide();
            }
            else 
            {
            $('#hoofdmenu').removeClass("class", "mousehide");  
            $('#hoofdmenu').addClass("class", "mouseshow");
            $('#hoofdmenu').show();
            }
        });

        $('#arrow').bind('click',function(){
            if ($('#hoofdmenu').attr("class") == "show"){
            $('#hoofdmenu').attr("class", "hide");  
            $('#hoofdmenu').hide();
            }
            else
            {
            $('#hoofdmenu').attr("class", "show");  
            $('#hoofdmenu').show(); 

            }
        });

     });

有人可以帮我解决这个问题吗？亲切的问候，弗兰克

【问题讨论】：

标签： javascript jquery

【解决方案1】：

为什么要为此添加特殊类？您可以使用 hide() 和 show() 函数进行点击，使用 mouseOver() 和 mouseOut() 函数进行鼠标悬停。

Check this out for more

编辑：由于某种原因，我无法加载 jquery.com 来指出正确的页面

【讨论】：

不，它不像手风琴。这是一个滑入的菜单，对不起，也许我不明显。
手风琴中使用的代码（或在下面的帖子中）仍然可以帮助您。原理保持不变：在鼠标单击或鼠标悬停时隐藏和显示某些内容。

【解决方案2】：

大量使用 attr() 和类非常慢，因为每次都会发出 DOM 重排。另外，请确保缓存元素。我们可以加快速度：

$(function(){
    var menu = $('#menu'),
        arrow = $('#arrow'),
        isOpen = false;

    arrow.hover(function(){
        if(isOpen) return;

        if(menu.is(':visible'))
            menu.hide();
        else
            menu.show();
    });
    arrow.click(function(){
        if(isOpen)
            menu.hide();
        else
            menu.show();

        isOpen = !isOpen; // shift bool
    });
});

【讨论】：