html - 如何仅使用 CSS 切换我的 "read More"

Question

仅在 CSS 中寻找解决方案。我的网站上有故事部分，但我只想显示每个故事的一小部分，如果读者想阅读故事的其余部分，可以单击“阅读更多...”。这对我有用，但我希望“阅读更多...”在单击时消失，因为故事底部会出现“阅读较少”，因此读者可以在阅读后再次将其最小化。这是我的代码的链接:My code @js fiddle

<span id="myReadMore">
  <h4>First part of the static content</h4>
  <p>
      <label for="inputShownContent3">
        <span>Read more....</span>
      </label>
  </p>
</span>
<br />
<input type=radio id="inputShownContent3" name="group3" />


<span id="spanHiddenContent3">
  <p>toggle the second part of the story.</p>

  <label for="inputHiddenContent3">
    <span>Read less....</span>
  </label>
</span>
<input type=radio id="inputHiddenContent3" name="group3" />

还有我的CSS，

input#inputHiddenContent3,#inputShownContent3 
{
  display: none;
}

span#spanHiddenContent3 
{
  display: none;
}

input#inputShownContent3:checked ~ span#spanHiddenContent3 
{
  display: block;
}

input#inputHiddenContent3:checked ~ span#spanHiddenContent3 
{
  display: none;
}
input#inputShownContent3:checked ~
  span#myReadMore
{
  display: none;
}

Answer 1

input#inputHiddenContent3,#inputShownContent3 {
  display: none;
}

span#spanHiddenContent3 {
  display: none;
}

input#inputShownContent3:checked ~ span#spanHiddenContent3 {
  display: block;
}

input#inputHiddenContent3:checked ~ span#spanHiddenContent3 {
  display: none;
}

input#inputShownContent3:checked ~ #myReadMore p {
    display: none;
}

<input type=radio id="inputShownContent3" name="group3" />
<span id="myReadMore">
  <h4>First part of the static content</h4>
<p>
  <label for="inputShownContent3"><span>Read more....</span></label>
</p>
</span>
<br />


<span id="spanHiddenContent3">
            <p>						toggle the second part of the story. </p>

    <label for="inputHiddenContent3">
                  <span>Read less....</span>
    </label>
</span>
<input type=radio id="inputHiddenContent3" name="group3" />

我在 HTML 中将隐藏的复选框向上移动了一点(正如评论所说，您不能向后查询)。此外，我添加了一个类似于您的原始选择器的选择器，它选择包含“阅读更多”的段落并在复选框处于事件状态时将其隐藏。

使用复选框和 checked 属性实际上是一种非常巧妙的方法...感谢您教我一些东西!

编辑:没有注意到您自己的一些 CSS 规则试图做同样的事情。因此，其中的某些部分可能过多，可以修剪掉。不幸的是，我很懒。