Прикрепленный javascript при физическом перетаскивании для изменения размера окна браузера

Question

У меня есть функция, которая расширяет выпадающий список, когда размер браузера n.

Размер n определяется запросами css media и работает должным образом.

Однако когда я физически перетащить ширину окна браузера вне, функция .click остается связанной с элементом, даже если запрос СМИ указывает на то, что CSS парения эффект имеет место, когда браузер размера п + 1.

Обновление в любой точке создает желаемое поведение, но, конечно, я не хочу требовать обновления.

var section_4 = "#main-menu > li:nth-child(4) > a"; 
    var sub_section_4 = "#main-menu > li:nth-child(4) > ul"; 

    $(section_4).click(function() { 
     $(sub_section_4).slideToggle(300);   
     return false; 
    }); 

как я могу применить эту функцию только на заданный размер и не имеют .click следовать к списку инлайн? спасибо

Answer 1

Вы можете использовать JQuery .width() и .resize() как это:

var section_4 = "#main-menu > li:nth-child(4) > a"; 
var sub_section_4 = "#main-menu > li:nth-child(4) > ul"; 

var docWidth = (window).width(); 
$(document).resize(function(){ 
    docWidth = (window).width(); // Refresh value on resize 
}); 

$(section_4).click(function() { 
    if(docWidth < [integer]){  // set integrer the same as your @media. 
     $(sub_section_4).slideToggle(300); 
     return false; 
    } 
});