Проблема с изменением размера jQuery для реагирования

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 
    };