jquery - 响应式 Jquery 菜单 - 当屏幕增加时它可以工作，但当它减少时它不会

Question

我在使用响应式菜单时遇到了问题：当浏览器大小大于 800 像素时，这是一个典型的下拉菜单，其中通过悬停打开子菜单，但是当大小小于 800 像素时，通过单击（对于手机）打开子菜单。

问题是当我以 100% 缩放打开页面时，它可以正常工作（悬停），但是当我放大（小于 800 像素）时，我的效果加倍：悬停也可以单击。如何“关闭”悬停效果并仅单击。希望这段代码能解释一切：

function checkResize() {
    var ww = $(window).width();
    if ( ww < 800) {
        $('#main-menu-list li').on('click', function() {
            if ($(this).length>0) {
                $(this).children('ul').toggle();
            }
        });
    } else {
        $('#main-menu-list li').hover(function() {
                $(this).children('ul').fadeIn();
            },  
            function() {
                $(this).children('ul').fadeOut(200);
            }
        );
    };
};

Answer 1

假设您的checkResize方法被多次调用，您应该在添加新的事件侦听器之前删除事件侦听器。例如删除所有click, mouseenter(hover in) 和mouseleave(hover out) 监听器：

function checkResize() {
    $('#main-menu-list li').off('click mouseenter mouseleave');
    ...

这应该让您有点击或悬停行为。