Question

我遇到过jQuery中“嵌套”切换语句的情况。

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

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

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

如果我从显示的所有详细信息开始（您可以隐藏并显示详细信息并且不显示关闭日期），这样可以正常工作。但默认情况下，隐藏详细信息，如果用户将某些天设置为关闭，然后显示详细信息，则会显示所有日期的详细信息，甚至是已关闭的日期。

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

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

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

感谢您的帮助。

Answer 1

实际上，问题在于您最初隐藏了更改可见性的元素的父元素。我假设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

嵌套的jQuery切换语句

1 个答案: