css - CSS 中的 "Read more"在表格中不起作用

Question

我正在尝试将“阅读更多”箭头放在第三列，它应该会在第一列中展开文本。这是我的代码，在表外运行良好，但在表内却不行。我的错误在哪里？我不想使用 jQ 或 JS。

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  display: none;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  display: block;
}

.read-more-state ~ .read-more-trigger:before {
  width: 0;
  height: 0;
  border-top: .6rem solid red;
  border-right: .6rem solid transparent;
  border-left: .6rem solid transparent;
  display: inline-block;
  content: '';
}

.read-more-state:checked ~ .read-more-trigger:before {
  transform: rotate(180deg);
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
}

td {
  border:1px solid black;
}

<article>
    <h4>Lorem ipsum</h4>
    <input type="checkbox" class="read-more-state" id="post-1" />
    <div class="read-more-wrap">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim doloremque voluptate maiores fugiat nam ab dolorum magni eos libero laudantium, eum cupiditate atque repellendus debitis quisquam blanditiis, quis modi aliquid?</p>
        <span class="read-more-target" id="post-1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis architecto quia modi. Optio ducimus amet aliquam, recusandae ad, cupiditate harum minima sint repellat tenetur dolores, soluta quidem est veniam reprehenderit?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id iusto ratione error blanditiis non, commodi sequi. Quas, id. Atque harum hic quia totam qui laborum. Molestias laborum, tempora ratione aperiam.</p>
        </span>
    </div>
    <label for="post-1" class="read-more-trigger"></label>
</article>

<hr>

<table>
    <tr>
        <input type="checkbox" class="read-more-state" id="post-2" />
        <td class="read-more-wrap">Lorem ipsum dolor sit amet.
            <p class="read-more-target" id="post-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, aperiam aut eaque eos esse fugit id, illo impedit ipsa iure mollitia natus.</p>
        </td>
        <td>100 pts</td>
        <td><label for="post-2" class="read-more-trigger">???</label></td>
    </tr>
</table>

Answer 1

找到问题了。你不能有 <input />直属<tr> .稍微更改一下代码。此外，使用 <p>里面<span>似乎不是一个好主意。将其更改为 <div> :

.read-more-state {
  display: none;
}

.read-more-target {
  display: none;
}

.read-more-state:checked + table .read-more-wrap .read-more-target {
  display: block;
}

.read-more-trigger:before {
  width: 0;
  height: 0;
  border-top: .6rem solid red;
  border-right: .6rem solid transparent;
  border-left: .6rem solid transparent;
  display: inline-block;
  content: '';
}

.read-more-state:checked + table .read-more-trigger:before {
  transform: rotate(180deg);
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
}

td {
  border:1px solid black;
}

<input type="checkbox" class="read-more-state" id="post-2" />
<table>
  <tr>
    <td>
      <div class="read-more-wrap">
        <p>Lorem ipsum dolor sit amet.</p>
        <p class="read-more-target" id="post-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, aperiam aut eaque eos esse fugit id, illo impedit ipsa iure mollitia natus.</p>
      </div>
    </td>
    <td>100 pts</td>
    <td>
      <label for="post-2" class="read-more-trigger"></label>
    </td>
  </tr>
</table>