jquery - 调整屏幕大小时如何禁用下拉菜单 jQuery 悬停功能

Question

我想制作一个用户友好的响应式网站，但我不熟悉 jQuery。希望你们能进一步帮助我。当屏幕尺寸缩小(最大767px)时，我想禁用jQuery的下拉悬停功能。我唯一想要的是点击功能而不是悬停功能。

$(function(){
    $(".dropdown").hover(function() {
        $(".dropdown-menu", this).stop(true, true).fadeIn("fast");
        $(this).toggleClass("open");         
    }, function() {
        $(".dropdown-menu", this).stop(true, true).fadeOut("fast");
        $(this).toggleClass('open');          
    });
});

Answer 1

简单的答案是使用 jQuery 的 $(window).resize 事件来检查 $(window).width。但是，根据不同浏览器处理滚动条的方式，可能会存在额外的复杂性(请参阅 https://www.fourfront.us/blog/jquery-window-width-and-media-queries )。此外，通过绑定(bind)和解除绑定(bind)，悬停事件不起作用。悬停事件实际上只是 mouseenter 和 mouseleave 事件的直接实现。不过，以下内容应该对您有用。如果有问题请告诉我，因为我没有测试过。

    $(window).resize(function(){    
        if ($(window).width() <= 767) {  
             $(".dropdown").unbind("mouseenter mouseleave");
        }
        else {
            $(".dropdown").bind({
                 mouseenter: function() {
                    $(".dropdown-menu", this).stop(true, true).fadeIn("fast");
                    $(this).toggleClass("open");
                 },
                 mouseleave: function() {
                    $(".dropdown-menu", this).stop(true, true).fadeOut("fast");
                    $(this).toggleClass('open');
                 }
            });
        }
    });