[英]How to add automatically collapse/expand in content wordpress (single.php)?
There are a lot of WordPress plugins for adding collapse/expand in WordPress content, such as Collapse-O-Matic .有很多 WordPress 插件用于在 WordPress 内容中添加折叠/展开,例如Collapse-O-Matic 。
But is there a way to add automatically collapse/expand in content WordPress ( single.php
)?但是有没有办法在内容 WordPress (
single.php
) 中添加自动折叠/展开? If the content is more than 50 words, automatically the rest will be hidden.如果内容超过 50 个字,rest 将自动隐藏。
I found the tutorial here:我在这里找到了教程:
http://shakenandstirredweb.com/240/jquery-moreless-text http://shakenandstirredweb.com/240/jquery-moreless-text
but I can not be a way to use it.但我无法使用它。 Can anyone help?
谁能帮忙?
Option 1: 选项1:
Include the post excerpt and post content, hiding the content with css. 包括帖子摘录和发布内容,用css隐藏内容。
<div class="excerpt"><?php the_excerpt();?><a href="#">Read more</a></div>
<div class="content"><?php the_content(); ?><a class="less-button" href="#">Read more</a></div>
In your css file: 在你的css文件中:
.content{
max-height: 0;
overflow: hidden;
transition: max-height .4s ease;
}
.content.-show {
max-height: 300px; // the closer this height is to reality, the smoother the transition
}
Javascript/jQuery 使用Javascript / jQuery的
$('.excerpt a[href="#"]').on('click', function() {
e.preventDefault();
$('.content').addClass('-show);
}
$('.content a.less-button').on('click', function() {
e.preventDefault();
$('.content').removeClass('-show);
}
I tried using the following code: 我尝试使用以下代码:
<div class="excerpt"><?php the_excerpt();?><a href="#">Read more</a></div> <div class="content"><?php the_content(); ?><a class="less-button" href="#">Read more</a></div>
.content{ max-height: 0; overflow: hidden; transition: max-height .4s ease; } .content.-show { max-height: 300px; // the closer this height is to reality, the smoother the transition }
<script type="text/javascript"> $('.excerpt a[href="#"]').on('click', function() { e.preventDefault(); $('.content').addClass('-show); } $('.content a.less-button').on('click', function() { e.preventDefault(); $('.content').removeClass('-show); } </script>
Result: Text successfully cut off, but the link Readmore to expand text not working. 结果:文本已成功切断,但链接Readmore以扩展文本无法正常工作。 What do I need to improve, so to expand text link Readmore can work well.
我需要改进什么,所以扩展文本链接Readmore可以很好地工作。
This might be old but I solve it like this as none of the answers works for me:这可能是旧的,但我这样解决它,因为没有一个答案对我有用:
HTML and PHP: HTML 和 PHP:
<span class="p-read-more"></span>
<?php the_content(); ?>
<a href="" class="read-more-link">Read More</a>
CSS: CSS:
.p-read-more+p {
position: relative;
overflow: hidden;
max-height: 110px;
height: auto;
transition: max-height 1s linear;
}
.expand {
max-height: 100% !important;
}
.read-more-link {
display: block;
max-width: 85px;
}
Note: The 110px max height and 85px width might need to be changed according to your text font size.注意: 110 像素的最大高度和 85 像素的宽度可能需要根据您的文本字体大小进行更改。
jQuery: jQuery:
$(document).ready(function() {
$(".read-more-link").click(function(e) {
e.preventDefault();
if ($(this).text() == "Read More") {
$(this).parent().find(".p-read-more+p").addClass("expand");
$(this).text("Read Less");
} else {
$(this).parent().find(".p-read-more+p").removeClass("expand");
$(this).text("Read More");
}
});
});
This is another Variation for jQuery that I like这是我喜欢的 jQuery 的另一个变体
$(document).ready(function() {
$(".read-more-link").click(function(e) {
e.preventDefault();
const myThis = $(this);
if ($(this).text() == "Read More") {
$(this).parent().find(".p-read-more+p").addClass("expand");
const myTimeout = setTimeout(myReadLess, 500);
function myReadLess() {
myThis.text("Read Less");
}
} else {
$(this).parent().find(".p-read-more+p").removeClass("expand");
const myTimeout = setTimeout(myReadMore, 1100);
function myReadMore() {
myThis.text("Read More");
}
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.