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

Question

我无法让它工作，所以很明显我做错了什么......我在菜单的子菜单上创建了一个淡入悬停状态，效果很好，但是当我缩小到移动 View 时effect 仍然是相关的，我不希望这样，因为移动设备没有悬停状态。所以我在 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