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

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

• 如果单击按钮div，即使将鼠标悬停在按钮div上，菜单也会显示并保持不变
• 如果再次单击按钮div，菜单将隐藏
• 当菜单在MouseEnter或mouseout上隐藏时，会显示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(); 

            }
        });

     });

有人能帮我解决这个问题吗？ 亲切问候,，

---

Frank

为什么要为此添加特殊类？可以使用hide（）和show（）函数进行单击，使用mouseOver（）和mouseOut（）函数进行鼠标悬停

编辑：由于某些原因，我无法加载jquery.com来使用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
    });
});

---

不，它不像手风琴。这是一个滑入的菜单，很抱歉，也许我不是很明显。不过，手风琴（或下面的帖子）中使用的代码可以帮助你。原理是一样的：在鼠标点击或鼠标套上隐藏或显示某些东西。