Question

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

麻烦的是，当我打开100％缩放的页面时它工作正常（悬停），但当我放大（小于800px）然后我有倍增效果：悬停工作和点击也。如何“关闭”悬停效果并仅点击。希望这段代码解释一切：

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（悬停）和mouseleave（悬停）听众：

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

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

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

1 个答案: