移动设备和平板电脑的悬停问题

Question

我的悬停菜单面临着手机和平板电脑的问题。我需要点击两次才能打开下拉列表，但我真的不知道如何确定移动设备和平板电脑的大小。以下是我的悬停效果代码：

$(".dropdown").hover(function() {
    $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("800");
    $(this).toggleClass('open');
}, function() {
    $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("800");
    $(this).toggleClass('open');
});
$(".dropdown-2").hover(function() {
    $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideDown("800");
    $(this).toggleClass('open');
}, function() {
    $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideUp("800");
    $(this).toggleClass('open');
});

我想要的菜单只有一个点击打开某些下拉列表，而不是两次点击:/。请注意，我是JavaScript和jQuery的初学者，所以稍微解释一下也是很好的。谢谢。

Answer 1

在脚本中添加一个条件，仅根据窗口/屏幕大小触发悬停功能：

if($(window).width() > 1024) {
    $(".dropdown").hover(function() {
        $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("800");
        $(this).toggleClass('open');
    }, function() {
        $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("800");
        $(this).toggleClass('open');
    });
    $(".dropdown-2").hover(function() {
        $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideDown("800");
        $(this).toggleClass('open');
    }, function() {
        $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideUp("800");
        $(this).toggleClass('open');
    });

} else {
    $(".dropdown").click(function() {
        $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("800");
        $(this).toggleClass('open');
    }, function() {
        $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("800");
        $(this).toggleClass('open');
    });
    $(".dropdown-2").click(function() {
        $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideDown("800");
        $(this).toggleClass('open');
    }, function() {
        $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideUp("800");
        $(this).toggleClass('open');
    });

}

检查屏幕尺寸是否大于1024像素(将其更改为您喜欢的任何套件)。

如果是，它将运行带有悬停功能的下拉列表。否(移动端)，它将运行点击功能的下拉列表。

备注：如果在较大的屏幕上测试响应功能，您将需要运行一个'resize‘函数，该函数将检查屏幕尺寸是否自那时以来发生了变化。因此，最好将整个代码包装在一个函数中，以便再次调用：

function hoverOrClick() {
if($(window).width() > 1024) {
    $(".dropdown").hover(function() {
        $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("800");
        $(this).toggleClass('open');
    }, function() {
        $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("800");
        $(this).toggleClass('open');
    });
    $(".dropdown-2").hover(function() {
        $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideDown("800");
        $(this).toggleClass('open');
    }, function() {
        $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideUp("800");
        $(this).toggleClass('open');
    });

} else {
    $(".dropdown").click(function() {
        $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("800");
        $(this).toggleClass('open');
    }, function() {
        $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("800");
        $(this).toggleClass('open');
    });
    $(".dropdown-2").click(function() {
        $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideDown("800");
        $(this).toggleClass('open');
    }, function() {
        $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideUp("800");
        $(this).toggleClass('open');
    });

}
}
hoverOrClick(); // Runs code the first time

$(window).resize(function(){
 hoverOrClick(); // Runs code again to see if screen size has changed
}