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

6 浏览
0 Comments

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

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



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

我以为也许需要给每个标签命名唯一的名称，所以我做了下面的更改，但按钮没有任何作用。



更多文本
#mycheckbox1:checked ~ .moretext {
  display: block;
}
.moretext{
  display: none;
}
#mycheckbox1{
  display: none;
}
.showmore{
  cursor: pointer;
}

请问有人可以告诉我我做错了什么吗？谢谢。

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

这是代码的整个HTML部分

将菊花送到开普敦及周边地区

菊花的历史可以追溯到15世纪的中国。菊花的花瓣美丽地排列，完美无缺，因此它很快成为中国古代贵族的花朵。它被认为非常重要，只有贵族才被允许种植。在这个时期，菊花的意义也包括活力和长寿。唐代（618-907年）诗人元稹在他的诗《菊花》中写道：“我没有特别偏好菊花，但开花后确实没有更好看的花朵。”

 
 
菊花在公元400年由佛教僧侣传入日本后，日本人如此喜爱这朵美丽的花，以至于它很快被采用为皇帝的纹章和官方印章。“菊”是菊花的日语名称，每年都有一个国家菊花日，也被称为幸福节日。虽然它最初是金黄色的，但如今世界上有成千上万种不同类型和颜色的菊花，它们都有着自己的含义。


我们的菊花花束经过手工包装，用我们标志性的牛皮纸和塑料纸包装，并附上一张美丽的卡片，上面写有您的个人留言。这些花束肯定会给某人带来微笑。选择五种不同大小的花束，可以送货上门到开普敦及周边地区。

以及相应的CSS样式如下 - 

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

0

2 答案

0 Comments

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

问题的原因是，在使用CSS兄弟选择器之前，应该先定义.moretext类。

解决方法是，将.moretext类定义在#mycheckbox:checked ~ .moretext之前。

以下是解决问题的代码：

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

此代码可以在jsfiddle上运行。以下是代码链接：[https://jsfiddle.net/Hfwthorn/2rf3gtvy/2/](https://jsfiddle.net/Hfwthorn/2rf3gtvy/2/)

以下是从不工作的页面中提取的代码：

问题出现的原因是，.moretext是<p>标签的兄弟元素，而不是输入框。这就是为什么CSS兄弟选择器不起作用的原因。尝试删除段落包装器即可解决问题。代码应该如下所示（与工作页面相同）：

此外，Wordpress会自动将文本中的双换行符转换为HTML段落。如果想要禁止这种转换，可以参考以下问题：[Disable WordPress from adding <p> tags](https://stackoverflow.com/questions/11248628)

除此之外，还有一个用户遇到了类似问题。他在[flowersforeveryone.co.za/product-category/chrysanthemums](https://flowersforeveryone.co.za/product-category/chrysanthemums)页面上无法使代码运行，但在[flowersforeveryone.co.za/send-tulips](https://flowersforeveryone.co.za/send-tulips)页面上可以正常工作。他问是否有做错了什么。

有人回答说，Wordpress的CSS可能有些令人困惑。他询问用户是否正确识别了覆盖整个页面的类。

用户回复说，他将整个HTML代码添加到了Woocommerce产品>分类页面编辑器中，并将CSS添加到了自定义CSS中。

回答者给出了两个解决方法：

1. 使用链接中的代码来禁用wpautop过滤器，该过滤器会将双换行符<br><br>转换为段落。

2. 精简代码：在编辑器中添加HTML代码时，删除所有空格，使其成为一个字符串。

希望以上解答对您有帮助。

0
0 Comments

问题的原因是在wordpress页面上可以正常工作，但在类别页面上却不能正常工作，原因不明。解决方法不详。

文章如下：

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

问题出现在一个wordpress页面上，链接为flowersforeveryone.co.za/send-tulips，但在类别页面上，链接为flowersforeveryone.co.za/product-category/chrysanthemums，却无法正常工作。对此原因不明。

代码如下：

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





Some more text

解决方法不详。

0