嵌套jQuery切换语句 [英] Nested jQuery toggle statements

问题描述

我遇到的情况是我在jQuery中嵌套"了切换语句.

I have a situation where I have "nested" toggle statements in jQuery.

我有很多选择，允许用户将一天设置为开放或关闭.

I have a bunch of selects that allow a user to set a day as open or closed.

然后我有一个选择，允许用户显示所有日期的详细信息.默认情况下，详细信息是隐藏的(这引起了我的问题).

I then have a select that allows a user to show details about all the days. Details are hidden by default (this is causing my problem).

如果用户将某天设置为关闭日，则当用户选择显示所有天的详细信息时，我不想显示该天.例如.如果星期一设置为关闭，而一周的其余时间是打开的，并且用户选择显示详细信息"，则它将显示除星期一以外的所有日期的详细信息.

If a user sets a day to closed I don't want to display that day when the user selects to display details for all days. Eg. if monday is set to closed and the rest of the week is open and the user selects "display details" it would show the details for all days except Monday.

如果我先显示所有详细信息，则此方法很好(您可以隐藏并显示详细信息，并且不显示关闭日).但是默认情况下，这些详细信息是隐藏的，如果用户将某天设置为关闭，然后显示该详细信息，则会显示所有天的详细信息，甚至是关闭的所有天.

This works fine if I start with all the details showing (you can hide and show the details and closed days are not displayed). But by default the details are hidden and if a user sets some days to closed and then displays the details it displays the details for all days, even the closed ones.

在更改包含div的切换时，是否有一种简单的方法来保留嵌套"切换?

Is there an easy way to persist the "nested" toggle when the toggle for the containing div is changed?

在这个jFiddle中，我整理了一个简单的例子来说明这种情况.

I have put together a crude example of the sort of situation in this jFiddle.

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

感谢您的帮助.

推荐答案

确实，问题在于，您更改其可见性的元素的父元素最初被隐藏.我认为jQuery会进行一些优化，以避免不必要的CSS和DOM更改.

Indeed, the problem is that the parent element of the elements you change the visibility of is initially hidden. I assume that jQuery performs some optimization to avoid unnecessary CSS and DOM changes.

如果您将布尔值传递给 .toggle() ^[docs] ，无论如何，IMO还是更好的选择，它可以确保元素的状态始终正确:

It works though if you pass a boolean to .toggle() ^[docs], which, IMO, is better anyway, it ensures that the state of the element is always correct:

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

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

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

The argument controls whether the element should be shown (true) or hidden (false).

演示

这篇关于嵌套jQuery切换语句的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！