javascript - 在单击或鼠标悬停时显示菜单/div 不是简单的方法

Question

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

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

            }
        });

     });

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

Answer 1

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

Check this out for more

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