jquery - CSS 兄弟组。需要技巧

Question

好的，我明白了:

<tr class="group expanded"> ... </tr>
<tr class="row"> ... </tr>
<tr class="row"> ... </tr>
<tr class="row"> ... </tr>
<tr class="row"> ... </tr>
<tr class="group expanded"> ... </tr>
<tr class="row"> ... </tr>
<tr class="row"> ... </tr>
<tr class="group expanded"> ... </tr>
<tr class="row"> ... </tr>
<tr class="row"> ... </tr>
<tr class="row"> ... </tr>

当有人点击组时，jQuery 将类从展开更改为折叠。当展开时，该组下面的行应该是可见的，当折叠时 - 隐藏。我只想用 CSS 来做到这一点。以下无效:

tr.expanded ~ tr.row { display:table-row; }
tr.collapsed ~ tr.row { display:none; }

因为如果我们得到一个序列 expanded-collapsed-expanded，第三组行(和所有其他行)将被隐藏，即使该组由于 css 优先级被展开(折叠的声明在后面)展开)。我应该怎么办？我敢肯定应该有一个技巧。 :)

分组数和分组后的行数不同。

请不要建议我将要包含在组中的行的元素层次结构化，我想按原样解决这个问题。

提前致谢!

Answer 1

在下一次出现其他 sibling 之前，无法仅使用 CSS 来选择一组有限的后续 sibling 。请参阅我对 this similar question 的回答.

如果您出于某种原因无法修改您的 HTML，您唯一的选择是 jQuery，它提供了一个 .nextUntil()用于此特定目的的方法。