为什么我不能重复使用“立即阅读”按钮的代码？

Question

我有一段代码可以在 wordpress 页面中创建“阅读更多”标签。它在一页上运行良好，但如果我尝试将其复制到另一页上，它在第二页上不起作用。

<input type="checkbox" id="mycheckbox" />
<label for="mycheckbox" class="showmore">Toggle more</label>
<div class="moretext" >Some more text</div>

#mycheckbox:checked ~ .moretext {
  display: block;
}

.moretext{
  display: none;
}

#mycheckbox{
  display: none;
}
.showmore{
  cursor: pointer;
}

我想也许我需要为每个按钮命名，所以我做了下面的操作，但按钮没有做任何事情。

<input type="checkbox" id="mycheckbox1" />
<label for="mycheckbox1" class="showmore">Toggle more</label>
<div class="moretext" >Some more text</div>

#mycheckbox1:checked ~ .moretext {
  display: block;
}

.moretext{
  display: none;
}

#mycheckbox1{
  display: none;
}
.showmore{
  cursor: pointer;
}

谁能告诉我我做错了什么。谢谢

******************更新**********************

This is the entire HTML portion of the code

<H3> Send Chrysanthemums all over Cape Town and Surrounds</H3>
<div class = "textcontainer">

The history of chrysanthemums dates back to China in the 15th century. Chrysanthemum flowers offered such perfection with the beautiful alignment of petals that it quickly became the blossom of nobility in ancient China. It was held in such high esteem that only nobles were permitted to grow it. In this time, the chrysanthemum meaning came to include vitality and longevity. "I don't have a particular preference for chrysanthemum, yet there are indeed no better looking flowers after it blooms," wrote the Tang Dynasty (618-907) poet Yuan Zhen in his poem "Chrysanthemum."

<input type="checkbox" id="mycheckbox">
 <br>
 <label for="mycheckbox" class="showmore">Toggle more</label>

 <div class="moretext">

After making its way over to Japan by Buddhist monks in 400 AD, the Japanese were so enamoured by this beautiful flower that it was soon adopted as the emperor’s crest and official seal. “Kiku” is the Japanese name for chrysanthemum and every year there is a National Chrysanthemum Day which is also referred to as the Festival of Happiness. Though it is originally a golden yellow colour, today there are thousands of different types and colours in the world that naturally have their meaning.
<br>
<br>
Our bouquets of chrysanthemums are hand wrapped and presented in our signature kraft paper and cellophane, accompanied with a beautiful card containing your personal message. These flower bouquets are sure to bring a smile to someone’s face. Select from five different bouquet size options for door to door delivery all over Cape Town and surrounding areas.
</div>
</div>

随之而来的 css 是 -

.moretext{
  display: none;
}
#mycheckbox:checked ~ .moretext {
  display: block;
}
#mycheckbox{
  display: none;
}
.showmore{
  cursor: pointer;
}

Answer 1

似乎工作正常。有什么问题？

#mycheckbox:checked ~ .moretext {
  display: block;
}

.moretext{
  display: none;
}

#mycheckbox{
  display: none;
}
.showmore{
  cursor: pointer;
}

<input type="checkbox" id="mycheckbox" />
<label for="mycheckbox" class="showmore">Toggle more</label>
<div class="moretext" >Some more text</div>

Answer 2

你应该在 #mycheckbox:checked ~ .moretext 之前定义 .moretext 类（在兄弟选择器之前）

.moretext{
  display: none;
}
#mycheckbox:checked ~ .moretext {
  display: block;
}
#mycheckbox{
  display: none;
}
.showmore{
  cursor: pointer;

在我的 jsfiddle 上工作

已编辑： 那是您在非工作页面中的代码：

<p>
    <input type="checkbox" id="mycheckbox">
    <br>
    <label for="mycheckbox" class="showmore">Toggle more</label>
</p>
<div class="moretext"></div>

.moretext 这里是

标签的兄弟，而不是您的输入，这就是您的 css 兄弟选择器不起作用的原因。尝试摆脱段落换行。它应该看起来像这样（就像在工作页面上一样）：

 <input type="checkbox" id="mycheckbox">
 <br>
 <label for="mycheckbox" class="showmore">Toggle more</label>

 <div class="moretext"></div>

Wordpress 自动将文本中的双换行符更改为 HTML 段落。这个问题可能会有所帮助：Disable WordPress from adding <p> tags