javascript - 为移动设备禁用 jQuery 下拉菜单

Question

我的网站有我用 CSS 制作的导航下拉菜单，但我最近将其更改为 jQuery，因此它是动画的。当它是 CSS 时，我能够在移动设备的最小断点上禁用下拉菜单。但是对于 jQuery，我不知道该怎么做。这是我的下拉代码。当视口(viewport)变得足够小时，我该怎么做才能使其禁用？

$(document).ready(function() {
    $('.nav > li').mouseenter(function() {
        $(this).children('.nav-content').slideDown(200);
    });

    $('.nav > li').mouseleave(function() {
        $(this).children('.nav-content').slideUp(200);
    });
});

这是现在的网站:

http://mattboy115.github.io/scarymonkeyshow/index.html

Answer 1

您可以使用 $(window).width() 和 $(window).height() 检查屏幕的大小

有点像

$(document).ready(function() {
    if($(window).width() > 800){
        $('.nav > li').mouseenter(function() {
            $(this).children('.nav-content').slideDown(200);
        });

        $('.nav > li').mouseleave(function() {
            $(this).children('.nav-content').slideUp(200);
        });
    }
});