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

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');
});

我只需要点击一下即可打开某个下拉菜单，而不是点击2次：/。请注意我是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像素（将此更改为适合您的任何套件）。

如果是，它将使用悬停功能运行下拉列表。没有（移动），它将通过点击功能运行下拉列表。

注意： 如果在更大的屏幕上测试响应功能，则需要运行＆＃39;调整大小＆＃39;从那时起将检查屏幕尺寸是否发生变化的功能。所以最好将整个代码包装在一个函数中再次调用：

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
}