javascript - モバイル デバイスではなくなったときだけ、自分の機能をより大きな画面で実行したい

Question

これを機能させるのに問題があるので、明らかに何か間違っています...メニューのサブメニューにフェードインホバー状態を作成しましたが、これは完全に機能しますが、モバイルビューに縮小しても効果はまだですモバイルデバイスにはホバー状態がないため、これは望ましくありません。そのため、関数を 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'});
                });
            });
        });

    }
});