jQuery - выполнить скрипты на основе размера экрана при изменении размера окна без обновления?

Question

Если кто-то может мне помочь, пожалуйста?

Я закодировал отзывчивый макет, на большом экране есть один тип меню, в маленьком другом. здесь код JQuery:

if($(window).width() < 480){ 
     $('.menu_items').fadeOut(0); 
     $('.menu-bar').click(function(){ 
      $('menu_items').fadeToggle(500 , "swing"); 
      }); 
     $('.menu_item').click(function() { 
      $('menu-bar'); 
      }); 

    } else { 

    $('.menu_items').fadeOut(0); 
     $('.menu-bar').hover(function(){ 
      $(this).children().fadeIn(100, "swing"); 
      },function(){ 
       $(this).children().fadeOut(400, "swing"); 
       }).triger('mouseleave'); 
      }; 

это отлично работает! В размере экрана 480x320 и ниже активна первая функция, разрешение больше, чем 480 пикселей, второе.

В этом случае: , когда я изменяю размер окна за точкой торможения (480 пикселей), все еще активна первая функция, когда я загружаю html.

Я должен перезагрузить страницу, чтобы активировать нужную функцию.

Answer 1

Вы пробовали обернуть его в функцию изменения размера jQuery?

https://api.jquery.com/resize/

Answer 2

Применение window.resize:

window.onresize = function(event) { 
    if($(window).width() < 480){ 
    $('.menu_items').fadeOut(0); 
    $('.menu-bar').click(function(){ 
     $('menu_items').fadeToggle(500 , "swing"); 
     }); 
    $('.menu_item').click(function() { 
     $('menu-bar'); 
     }); 

} else { 

$('.menu_items').fadeOut(0); 
    $('.menu-bar').hover(function(){ 
     $(this).children().fadeIn(100, "swing"); 
     },function(){ 
      $(this).children().fadeOut(400, "swing"); 
      }).triger('mouseleave'); 
     }; 
}; 

JavaScript window resize event

Answer 3

JQuery имеет функцию .resize, которая вызывается всякий раз, когда элемент rezised. Вы должны быть в состоянии использовать его следующим образом:

$(window).resize(function() { 
    if(this.width() < 480){ 
     $('.menu_items').fadeOut(0); 
    $('.menu-bar').click(function(){ 
     $('menu_items').fadeToggle(500 , "swing"); 
     }); 
    $('.menu_item').click(function() { 
     $('menu-bar'); 
     }); 

    } else { 

    $('.menu_items').fadeOut(0); 
     $('.menu-bar').hover(function(){ 
     $(this).children().fadeIn(100, "swing"); 
     },function(){ 
      $(this).children().fadeOut(400, "swing"); 
      }).triger('mouseleave'); 
     };" 
    });