jQuery-Anhang <select>, in der Regel ausgeblendet, erscheint wieder nach modalen Fenster Verwendung

Question

Entschuldigung im Voraus, wenn ich die falsche Terminologie verwende, bin ich ziemlich neu bei jQuery.

Ich arbeite an einer Website mit einem responsiven Design. Bei kleineren Bildschirmgrößen wird das Menü durch jQuery/CSS mit einem Auswahl-Dropdown ersetzt. (I fügen Sie das <select> Feld über jQuery, es display:none über CSS Standard, es dann bei kleineren Auflösungen über CSS-Medienanfragen anzuzeigen.)

Das alles funktioniert gut, aber es scheint mit another jQuery plugin I'm running ein Konflikt zu sein, die automatisch größer angezeigt Versionen von Bildern in modalen Fenstern. Sehen Sie sich diese Seite an, klicken Sie auf das erste Bild, und beachten Sie, dass unter dem Menü <select> angezeigt wird. http://preview.saratogaresources.com/corporate-governance/

Dies ist der Code, den ich das Drop-down erstellen verwenden:

// Create the dropdown base 
$("<select />").appendTo(".nav"); 

// Create default option "Go to..." 
$("<option />", { 
    "selected": "selected", 
    "value" : "", 
    "text" : "Go to..." 
}).appendTo(".nav select"); 

// Populate dropdown with menu items 
$(".nav a").each(function() { 
var el = $(this); 
$("<option />", { 
    "value" : el.attr("href"), 
    "text" : el.text() 
}).appendTo(".nav select"); 
}); 

$(".nav select").change(function() { 
    window.location = $(this).find("option:selected").val(); 
}); 

Diese CSS mein Standard ist:

.nav select { 
display:none; 

}

Und das ist meine Medienabfrage:

@media all and (max-width: 800px) { 

.nav .menu-top-menu-container { 
    display:none; 
} 

.nav select { 
    display:block; 
    font-size:1em; 
    margin:1em auto; 
} 
} 

Das Lightbox-Plugin funktioniert auf den meisten Seiten, auf denen ich laufe, also wette ich, dass es mein Code ist, der das Problem ist, aber ich kenne jQuery nicht sehr gut. Irgendwelche Ideen würden am meisten geschätzt, danke !!

Answer 1

Ich reparierte diese durch meine jQuery innerhalb

laufen

jQuery(window).load(function($) 

statt

jQuery(document).ready(function($) 

[EDIT]: Eigentlich glaube ich nicht, dass die oben die endgültige Lösung war. Ich denke, was passiert ist, dass in jQuery selbst (neueste Version, 1.7.2) der <select> Feldstil auf "" (leer, was in inline-block übersetzt) ​​wird nach dem Modal-Fenster geschlossen. Wenn ich richtig verstehe, ist dies eine "Lösung" für das Problem von <select> s mit einem lächerlich hohen z-Index in früheren Versionen von IE, und damit durch modale Fenster zu zeigen. jQuery setzt sie für die Anzeige des modalen Fensters auf display:none und setzt sie dann zurück, nachdem das Fenster geschlossen wurde.

In meinem Fall hatte dies jedoch das Ergebnis display: inline-block zu meinem zuvor versteckten <select> Element hinzuzufügen. Ich habe das behoben, indem ich eine !important Deklaration dem CSS hinzugefügt habe, beide Stellen werden angezeigt: wurde gesetzt. Wütend!