Sticky Javascript, wenn physisch ziehen, um Browserfenster zu ändern

Question

Ich habe eine Funktion (en), die eine Dropdown-Liste erweitern, wenn der Browser Größe n ist.

Größe n wird von CSS-Medienabfragen bestimmt und funktioniert wie erwartet.

Jedoch, wenn ich physisch die Breite des Browserfensters heraus ziehen, bleibt die .click Funktion auch an das Element gebunden, obwohl eine Medienabfrage zeigt an, dass ein CSS-Hover-Effekt stattfindet, wenn die Browsergröße ist n + 1

Eine Aktualisierung an jedem Punkt erzeugt das gewünschte Verhalten, aber natürlich möchte ich keine Aktualisierung benötigen.

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

, wie kann ich mich bewerben diese Funktion nur auf eine bestimmte Größe und nicht haben die zur Inline-Liste .click zu folgen? Dank

Answer 1

Sie jquery .width() und .resize() wie diese verwenden:

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