Question

我正在尝试制作一个可以崩溃的菜单：

如果您单击按钮div，即使您将鼠标悬停在按钮div上，菜单也会显示并停留。
如果再次单击按钮div，则会隐藏菜单。
当菜单隐藏在鼠标中或鼠标悬停时，它显示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(); 

            }
        });

     });

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

Answer 1

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

Check this out for more

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

Answer 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
    });
});

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

2 个答案: