javascript - 在切换类上的 mouseenter 上

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

});

这是鼠标输入的代码:

$(".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-left 时)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");

});