如何切换我的“阅读更多"信息仅限于CSS [英] How do I toggle my "read More" with CSS only

问题描述

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

Looking for solutions in CSS only. I have story section on my website, but I only want to display a small part of each story, and the reader can click the "Read More..." if they want to read the rest of the story. This works for me, But I want the "Read more..." to go away when it is clicked, as a "read less" appears at the bottom of the story, so reader can minimize it again after reading it. Here is a link to my code: 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;
}

推荐答案

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中向上移动了隐藏的复选框(正如评论所说，您不能向后查询).另外，我添加了一个与您的原始选择器类似的选择器，用于选择包含更多"的段落并在复选框处于活动状态时将其隐藏.

I moved the hidden checkbox upward a bit in the HTML (as a comment said, you can't query backwards). In addition, I added a selector similar to your original that selects the paragraph containing "Read More" and hides it when the checkbox is active.

使用复选框和选中的属性实际上是一种非常漂亮的方法……感谢您教我一些东西！

Use of a checkbox and the checked property was actually a pretty nifty way of doing this...thanks for teaching me something!

没注意到您自己的CSS规则试图做同样的事情.因此，其中的某些部分可能过多，可能会被删除.不幸的是，我很懒.

Did not notice some of your own CSS rules trying to do the same thing. So, some parts of this are probably excessive and could be trimmed out. Unfortunately, I'm lazy.

这篇关于如何切换我的“阅读更多"信息仅限于CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！