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

时间:2013-08-10 20:45:13

标签: javascript jquery

我无法让它工作,所以很明显我做错了...我在菜单的子菜单上创建了一个淡入淡出状态,这很好用,但是当我缩小到移动视图时效果仍然相关,我不希望因为移动设备没有悬停状态。所以我在jquery(窗口).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'});
                });
            });
        });

    }
});

1 个答案:

答案 0 :(得分:2)

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

尝试使用document.documentElement.clientWidth