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; }

因为如果我们得到一个展开 - 折叠展开的序列，那么即使该群组由于css优先级展开，第三组行（以及所有其他行）也会被隐藏（崩溃的声明是在扩展）。我该怎么办？我确定应该有一个技巧。：）

组数及其后的行数不同。

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

提前谢谢！

Answer 1

在下一次出现其他兄弟姐妹之前，没有办法只使用CSS来选择一组有限的兄弟姐妹。请参阅我对this similar question的回答。

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

Answer 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）的样式。）

Answer 3

你能忍受像这样的kludge吗？ FIDDLE

这是一个复选框黑客（在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;
}

CSS兄弟组。需要诡计

3 个答案: