嵌套的jQuery切换语句

我有一种情况,我在jQuery中“嵌套”切换语句。

我有一堆选择允许用户将一天设置为打开或关闭。

然后我有一个选择,允许用户显示有关所有日子的详细信息。 默认情况下隐藏详细信息(这导致我的问题)。

如果用户将某一天设置为关闭,我不希望在用户选择显示所有日期的详细信息时显示该日期。 例如。 如果星期一设置为关闭且本周剩余时间开放且用户选择“显示详细信息”,则会显示除星期一以外的所有日期的详细信息。

如果我从显示的所有细节开始(这可以隐藏和显示详细信息并且不显示关闭日期),这样可以正常工作。 但默认情况下,隐藏详细信息,如果用户设置了几天关闭,然后显示详细信息,则会显示所有日期的详细信息,甚至是已关闭的详细信息。

当包含div的切换更改时,是否有一种简单的方法可以保持“嵌套”切换?

我已经在这个jFiddle中汇总了一个粗略的例子。

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

谢谢你的帮助。

实际上,问题是最初隐藏了更改可见性的元素的父元素。 我假设jQuery执行一些优化以避免不必要的CSS和DOM更改。

但是,如果你将一个布尔值传递给.toggle() [docs] ,它仍然有效,IMO,无论如何,它确保元素的状态总是正确的:

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

参数控制元素是显示( true )还是隐藏( false )。

DEMO