禁用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中檢測移動設備的最佳方法是什么？

然后，根據您的檢測，您可以申請是否符合您的條件。