禁用jQuery Dropdown for Mobile

Question

我的网站上有我使用CSS制作的nav下拉列表，但是最近我将其更改为jQuery，因此具有动画效果。 当它是CSS时，我能够在移动设备的最小断点处禁用下拉菜单。 但是用jQuery我不知道该怎么做。 这是我的下拉代码。 当视口足够小时，我应该怎么做使其禁用？

$(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);
        });
    }
}); 

Answer 2

给出的答案会起作用，但我建议您为移动设备制作第二个导航，并使用媒体查询来制作正确的节目。

只是真正的简单HTML：

<div class="desktop-nav">
    [nav code]
</div>
<div class="mobile-nav">
    [mobile nav code]
</div>

然后是CSS：

@media screen and (min-width: [X]px) {
    .mobile-nav {
        display: none;
    }
}
@media screen and (max-width: [X]px) {
    .desktop-nav {
        display: none;
    }
}

然后只需将mouseenter应用于.desktop-nav即可解决您的jquery：

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

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

Answer 3

我不确定您是否希望以特定大小执行此操作，或者是否希望将其用于移动设备。 例如，您可以使用现代化器来检测设备上是否启用了触摸：

使用Modernizr测试平板电脑和手机-需要征求意见

您还可以检查用户代理以匹配设备类型并以这种方式应用代码：

在jQuery中检测移动设备的最佳方法是什么？

然后，根据您的检测，您可以申请是否符合您的条件。