jQuery 调整响应大小的问题

Question

我正在为一个新站点开发 header，在使用 jquery（结合媒体查询）进行响应时遇到了一些问题。我的客户希望 header 响应两个断点，但也希望 window 手动调整大小。某些元素被隐藏并以 1024px window 大小显示，但我希望这在平板电脑加载 header 和 window 调整大小时都发生。我的jQuery如下...

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 deviceWidth = win.width();
            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;
                    })

                    if (win.width() <= 1024) {
                        topNav.prependTo(overlay);
                        mainNav.prependTo(overlay).insertAfter(topNav);
                        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', function(){

                        if (win.width() <= 1024) {
                            topNav.prependTo(overlay);
                            mainNav.prependTo(overlay);
                        }
                        else {
                            topNav.insertAfter('.logo');
                            mainNav.prependTo(header);
                        }
                    });
                };

有没有更简单的方法来完成这个？有没有一种方法我可以只编写一次我的函数，这样它们就会在 window 调整大小和加载时发生。任何帮助深表感谢。谢谢！

Answer 1

您可以在保存到变量的函数中定义调整大小的逻辑，然后您可以根据需要将其连接到任意数量的事件，而无需重新键入。

匿名函数很棒，因为您可以根据需要定义和传递它们。

Var resize = function() { 
     ResizeStuff
     };

jQuery 调整响应大小的问题

Issue with jQuery resize for responsive

jquery

resize

prepend

appendto

responsive-design