jQuery'resize'无法正常工作

时间:2015-03-01 13:47:01

标签: javascript jquery css function resize

需要一些帮助。我正在使用jQuery与媒体查询结合使用我的标题的一些响应方面。我的客户端希望标题响应于设备和手动调整窗口大小。因此,我已将所有响应函数都设置在单个函数中,然后将这些相同的函数设置在$(window).on(' resize',函数)中。感谢另一张海报,我得到了一个提示,将我的响应函数包装在变量中,然后将该变量传递给resize函数,而不是重写它。这是一个很棒的提示,对我来说是一个很好的学习中间javascript作家。但是当我这样做时,代码在resize函数中不起作用。如果我输入完全相同,它工作正常。但如果我通过该功能它不起作用。有人可以帮忙吗?代码如下:

                var win = $(window);
            var mainNav = $('.main-nav');
            var navItem = $('.main-nav li');
            var overlay = $('.nav-overlay');
            var header = $('#header');
            var subNav = $('.main-nav ul ul');
            var overlayIsVisible = false;
            var subNavIsVisible = false;
            var exitMain = $('.exit-main');
            var topNav = $('.top-nav');
            var hamburger = $('.tablet-buttons .hamburger');
            var exit = $('.tablet-buttons .exit');

                if ( header.is('*') ) {

                    navItem.hover(function() {
                        overlay.fadeIn('slow');
                        $(this).find('ul').toggleClass("active");
                        overlayIsVisible = true;
                    });

                    exitMain.click(function() {
                        overlay.fadeOut('fast');
                        overlayIsVisible = false;
                    });

                    function tabletNav() {

                        if (win.width() <= 1024) {

                            topNav.prependTo(overlay);
                            hamburger.click(function() {
                                overlay.fadeIn('slow');
                                hamburger.css('display', 'none');
                                exit.fadeIn('slow');
                            });
                            exit.click(function(){
                                overlay.fadeOut('slow');
                                exit.css('display', 'none');
                                hamburger.fadeIn('slow');
                            });
                        }
                        else{
                            topNav.insertAfter('.logo');
                        }
                    };

                    /*This makes the above Mobile/Tablet functions also work on resize of window*/

                    win.on('resize', tabletNav());

                };

0 个答案:

没有答案