Question

我的表行在每行的末尾都有一个ON / OFF按钮。单击时，我希望隐藏的行显示在单击的行下方。按钮切换单词ON和OFF就好了，但我似乎无法定位隐藏的行。我以为我可以用+ tr或~tr选择相邻的行。这是一个简化的版本......

input {display:none}
.hiddenrow {display:none}
input+label:before {content:'OFF'}
input:checked+label:before {content:'ON';background:#0F0;padding:0 3px}
input:checked~tr {display:block}

<table border=1>

  <tr>
    <td>Some data goes here&nbsp;&nbsp;&nbsp;</td>
    <td><input id=box1 type=checkbox><label     for=box1></label></td>
  </tr>
  <tr class=hiddenrow id=row2><td colspan=2>This is a hidden row</td></tr>


  <tr>
    <td>This row also has data&nbsp;&nbsp;&nbsp;</td>
    <td><input id=box2 type=checkbox><label for=box2></label></td>
  </tr>
  <tr class=hiddenrow id=row2><td colspan=2>This is another hidden row</td></tr>
  
  
  <tr>
    <td>Even more data goes here&nbsp;&nbsp;&nbsp;</td>
    <td><input id=box3 type=checkbox><label for=box3></label></td>
  </tr>
  <tr class=hiddenrow id=row3><td colspan=2>This is the third hidden row</td></tr>
  

</table>

上面的问题已经解决了，现在问题的下一部分...... 我有另一个问题，但我不想立刻把它扔进去。现在我需要在每一行上添加第二个输入。第一个开/关开关将使数据可以在页面底部的单独div中查看。第二个开关将显示隐藏的行。我们的第二台开关按照我想要的方式工作。在这个例子中，我有两个开关工作，但有一个问题。我必须为每一行创建一个单独的css行（请注意CSS末尾的divbox1和divbox 2的行）如果我有1000行，这不会很好。我正在寻找一种方法来将每行中的第一个开/关swtich与正确的hiddendiv相关联，而不是每个都有单独的CSS线。（我希望这是有道理的）

.a,.b {float: left;}
.a {width: 260px}
.hiddenrow {clear:left;display: none;}
.e {display: none;}

input {display: none;}
input + label:before {content: 'Off';}
input:checked + label:before {content: 'On';background:#0F0}
input:checked + label + .hiddenrow {display: block;}

#container {border:1px solid red;width:300px;height:200px} 

#divbox1:checked~#container #hiddendiv1 {display:block}
#divbox2:checked~#container #hiddendiv2 {display:block}

<div class="a">This is where data for row 1 goes</div>
<input id="divbox1" type="checkbox"><label for="divbox1"></label>
<input id="box1" type="checkbox"><label for="box1"></label>
<div class="hiddenrow">First row Hidden content. Hidden content.</div>
<br>
<div class="a">This is where data for row 2 goes</div>
<input id="divbox2" type="checkbox"><label for="divbox2"></label>
<input id="box2" type="checkbox"><label for="box2"></label>
<div class="hiddenrow">Second row Hidden content. Hidden content.</div>
<br>

<br><br>
<div id="container">
<div class="e" id="hiddendiv1"><br>div 1 is now viewable</div>
<div class="e" id="hiddendiv2"><br>div 2 is now viewable</div>
</div>

Answer 1

input:checked~tr无法正常工作，因为tr不是input的兄弟姐妹。您尝试使用CSS向上和向下移动DOM，这是您无法做到的。

我不知道是否需要使用表格，但我能想到的唯一一件事就是重新处理标记，以便您可以使用下一个兄弟选择器+

这是一个粗略的例子，但这样的事情可能适合你。

＆＃13;

.a,
.b {
  float: left;
}
.a {
  width: calc(100% - 45px);
}
.b {
  width: 45px;
}
.c {
  clear: left;
  display: none;
}
input {
  display: none;
}
label {
  text-align: center;
}
input + label:before {
  content: 'Off';
}
input:checked+label {
  background: #fc0;
}
input:checked + label:before {
  content: 'On';
}
input:checked + label + .c {
  display: block;
}

＆＃13;

<div class="a">1) Some content here.</div>
<input id="box1" type="checkbox">
<label class="b" for="box1"></label>
<div class="c">
  Hidden content. Hidden content. Hidden content. Hidden content. Hidden content. Hidden content.
</div>
<div class="a">2) Some content here.</div>
<input id="box2" type="checkbox">
<label class="b" for="box2"></label>
<div class="c">
  Hidden content. Hidden content. Hidden content. Hidden content. Hidden content. Hidden content.
</div>

＆＃13;

需要CSS来显示隐藏的表行。无法弄清楚Child Sibling选择器

1 个答案: