Question

当我调整浏览器大小时，我使用一个小jquery来更改菜单的类。这是有效的，但是当我想在新类上使用mouseenter时它不起作用。

这是我调整大小的代码：

$( window ).resize(function() {
    windowWidth = $(window).width();
    windowWidth = windowWidth + 17;

    if(windowWidth < 780) {
        $('.menu_bar').parent().addClass('mobile-header');
        $('.nav_top').removeClass('nav_top').addClass('nav-left');
        $('.primary-content').addClass('responsive');
    } else {
        $('.menu_bar').parent().removeClass('mobile-header');
        $('.nav-left').removeClass('nav-left').addClass('nav_top');
        $('.primary-content').removeClass('responsive');
    }

});

这是mouseenter的代码：

$(".nav-left ul").on({
        mouseenter: function () {
            $('ul', this).stop(true, true).slideDown(100);
        },
        mouseleave: function () {
            $('ul', this).stop(true, true).slideUp(100);
        }
    }, "li");

如果我在我的标记中将nav-top更改为nav-left（当菜单在文档准备就绪时左侧有nav类），则mouseenter工作正常。

Answer 1

试试这个：

$( window ).resize(function() {
windowWidth = $(window).width();
windowWidth = windowWidth + 17;

if(windowWidth < 780) {
    $('.menu_bar').parent().addClass('mobile-header');
    $('.nav_top').removeClass('nav_top').addClass('nav-left');
    $('.primary-content').addClass('responsive');
} else {
    $('.menu_bar').parent().removeClass('mobile-header');
    $('.nav-left').removeClass('nav-left').addClass('nav_top');
    $('.primary-content').removeClass('responsive');
}

$(".nav-left ul").on({
    mouseenter: function () {
        $('ul', this).stop(true, true).slideDown(100);
    },
    mouseleave: function () {
        $('ul', this).stop(true, true).slideUp(100);
    }
}, "li");

});

在mouseenter上切换类

1 个答案: