按窗口宽度Jquery条件淡入淡出

Question

我想让子菜单fadeIn，但只能超过850px的窗口宽度。我的代码只有在刷新页面时才能工作，但我也希望在调整窗口大小（或更改手机方位）时也能工作。怎么了？

function WinSize() {
    var winwidth = $(window).width();
    if (winwidth > 850) {
        $('#main-menu > ul > li').on({
            mouseenter: function() {
                $(this).find("ul").fadeIn(300);
            },
            mouseleave: function() {
                $(this).find("ul").fadeOut(300);
            }
        });
    }
}
$(window).on("load resize", WinSize);

Answer 1

尝试在.on内部移动条件。当前，当加载窗口大小大于850时，您正在绑定事件，并且不影响实际的.on事件

function WinSize() {
    $('#main-menu > ul > li').on({
        mouseenter: function() {
            var winwidth = $(window).width();
            if (winwidth > 850) {
                $(this).find("ul").fadeIn(300);
            }
        },
        mouseleave: function() {
            var winwidth = $(window).width();
            if (winwidth > 850) {
                $(this).find("ul").fadeOut(300);
            }
        }
    });
}
$(window).on("load resize", WinSize);