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

为什么我不能将代码重用于“立即阅读”按钮？

2 个答案: