Verschachtelte jQuery Toggle-Anweisungen

Question

Ich habe eine Situation, in der ich Toggle-Anweisungen in jQuery "geschachtelt" habe.

Ich habe eine Reihe von Auswahlen, die es einem Benutzer erlauben, einen Tag als offen oder geschlossen zu setzen.

Ich habe dann eine Auswahl, mit der ein Benutzer Details über alle Tage anzeigen kann. Details sind standardmäßig ausgeblendet (dies verursacht mein Problem).

Wenn ein Benutzer einen Tag auf "Geschlossen" setzt, möchte ich diesen Tag nicht anzeigen, wenn der Benutzer auswählt, dass Details für alle Tage angezeigt werden sollen. Z.B. Wenn Montags geschlossen ist und der Rest der Woche geöffnet ist und der Benutzer "Anzeigedetails" auswählt, werden die Details für alle Tage außer Montag angezeigt.

Das funktioniert gut, wenn ich mit allen Details anzeigen (Sie können ausblenden und zeigen die Details und geschlossene Tage werden nicht angezeigt). Aber standardmäßig sind die Details ausgeblendet und wenn ein Benutzer einige Tage auf geschlossen setzt und dann die Details anzeigt, werden die Details für alle Tage angezeigt, sogar die geschlossenen.

Gibt es eine einfache Möglichkeit, den "geschachtelten" Toggle beizubehalten, wenn der Toggle für das enthaltene Div geändert wird?

Ich habe ein grobes Beispiel für die Art von Situation in diesem jFiddle zusammengestellt.

http://jsfiddle.net/yTt3t/16/

Vielen Dank für jede Hilfe.

Answer 1

In der Tat ist das Problem, dass das Elternelement der Elemente, deren Sichtbarkeit Sie ändern, zunächst ausgeblendet ist. Ich nehme an, dass jQuery einige Optimierungen durchführt, um unnötige CSS- und DOM-Änderungen zu vermeiden. obwohl

Es funktioniert, wenn Sie einen boolean .toggle()^[docs] geben, die, IMO, sowieso besser ist, sorgt dafür, dass der Zustand des Elements ist immer richtig:

$("#monday_select").change(function(){ 
    $("#monday_details").toggle(this.value === 'Open'); 
}); 

$("#tuesday_select").change(function(){ 
    $("#tuesday_details").toggle(this.value === 'Open'); 
}); 

Das Argument legt fest, ob das Element sein sollte gezeigt (true) oder versteckt (false).

DEMO