javascript - 只希望我的功能在不再是移动设备时在更大的屏幕上进行

Question

我无法让它正常工作，所以显然我做错了什么...我在菜单的子菜单上创建了一个淡入悬停状态，效果很好，但是当我缩小到移动 View 时效果仍然相关，这是我不希望的，因为移动设备没有悬停状态。所以我在 jquery(window).resize 函数中敲击了我的函数，但它根本不起作用。

jQuery(window).resize(function() {

        var w = jQuery(window).width();

    if (w <= 768 ) {

        jQuery('nav.main-nav li').each(function() {

            var submenu = jQuery(this).find('ul:first');

            jQuery(this).hover(function() {

                submenu.css({opacity: 1});

                submenu.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeIn(300, function() {
                    jQuery(this).css({overflow:'visible', height:'auto', display: 'block'});
                });
            },
            function() {
                submenu.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeOut(300, function() {
                    jQuery(this).css({overflow:'hidden', display:'none'});
                });
            });
        });

    }
});

Answer 1

而不是使用jQuery(window).width();，

尝试使用document.documentElement.clientWidth