Question

我正在研究新网站的标题，并且在使用jquery（与媒体查询相结合）时遇到了一些问题，以便做出响应。我的客户端希望标头响应两个断点，但也需要手动调整窗口大小。某些元素是隐藏的，并以1024px窗口大小显示，但我希望在平板电脑加载标题和窗口调整大小时都会发生这种情况。我的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);
                        }
                    });
                };

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

Answer 1

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

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

Var resize = function() { 
     ResizeStuff
     };

jQuery的问题调整大小以响应

1 个答案: