CSS 兄弟组。需要技巧答案

【问题标题】：CSS siblings groups. Trick requiredCSS 兄弟组。需要技巧
【发布时间】：2014-08-20 06:46:08
【问题描述】：

好的，我明白了：

<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 将类从 expanded 更改为 collapsed。当展开时，该组下面的行应该是可见的，而当折叠 - 隐藏。我只想用 CSS 来做这件事。以下方法不起作用：

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

因为如果我们得到一个展开-折叠-展开的序列，第三组行（以及所有其他行）将被隐藏，即使该组由于 css 优先级而展开（折叠的声明紧随其后展开）。我应该怎么办？我相信应该有一个技巧。 :)

组数及其后的行数不同。

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

提前谢谢你！

【问题讨论】：

标签： jquery html css siblings

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我曾希望general sibling selector 能够与:not() 结合使用来证明是一个解决方案。像这样。

tr.expanded + tr:not(.collapsed ~ .row) {
    display: table-row;
}
tr.collapsed + tr:not(.expanded ~ .row) {
    display: none;
}

但是，:not 只接受简单的选择器，而一般的同级选择器不接受。

正如 BoltClock 建议的那样，nextUntil 应该可以很好地解决您的问题。特别是如果您已经在使用 jQuery，这不应该成为问题。这是test case。

$(".group").click(function () {
    $(this).toggleClass("expanded").toggleClass("collapsed").nextUntil(".group","tr.row").toggle();
});

（我保留了交替的类，因此如果需要，您可以相应地设置标题 (.group) 的样式。）

【讨论】：

【解决方案3】：

你能忍受这样的杂物吗？ FIDDLE.

这是一个复选框 hack（归因于 js 部分中的评论）。

如果您不坚持让可点击行是一系列 td，可能会有用。

注意：我玩了一会儿，实际上你可以在 <label> 标签内放一张小桌子，它似乎工作正常 - 另一个 FIDDLE。

CSS

table td {
    width: 54px;
    border: 1px solid gray;
    text-align: center;
}
input#row1[type=checkbox]:checked ~ .table1 {
   display: block;
}
input#row2[type=checkbox]:checked ~ .table2 {
   display: block;
}
input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
#upperlabel { 
  width: 300px;
  height: 20px;
  background-color: blue;
  color: white;
  display: block;
  line-height: 20px;
  text-align: center;
}
#middlelabel { 
  width: 300px;
  height: 20px;
  background-color: red;
  color: white;
  display: block;
  line-height: 20px;
  text-align: center;
}
.table1 {
   display: none;
}
.table2 {
   display: none;
}

【讨论】：