Question

仅在CSS中寻找解决方案。我的网站上有故事部分，但我只想展示每个故事的一小部分，读者可以点击“阅读更多...”＃34;如果他们想要阅读其余的故事。这对我有用，但我希望＆＃34;阅读更多...＆＃34;点击它后离开，作为＆＃34;少阅读＆＃34;出现在故事的底部，因此读者可以在阅读后再次将其最小化。以下是我的代码的链接：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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

我在HTML中向上移动隐藏的复选框（正如评论所说，你不能向后查询）。另外，我添加了一个类似于原始选择器的选择器，它选择包含＆＃34; Read More＆＃34;并在复选框处于活动状态时隐藏它。

使用复选框和选中的属性实际上是一种非常好的方式...感谢教我一些东西！

编辑：没有注意到你自己的一些CSS规则试图做同样的事情。所以，这部分内容可能过多，可能会被删除。不幸的是，我很懒。

如何切换我的＆＃34;阅读更多＆＃34;仅限CSS

1 个答案: