如何在内容wordpress(single.php)中自动添加折叠/展开? [英] How to add automatically collapse/expand in content wordpress (single.php)?

问题描述

有很多WordPress插件可用于在WordPress内容中添加折叠/展开，例如 Collapse-O-Matic .

There are a lot of WordPress plugins for adding collapse/expand in WordPress content, such as Collapse-O-Matic.

但是有没有一种方法可以在内容WordPress(single.php)中自动添加折叠/展开?如果内容超过50个字，其余的将自动被隐藏.

But is there a way to add automatically collapse/expand in content WordPress (single.php)? If the content is more than 50 words, automatically the rest will be hidden.

我在这里找到了该教程:

I found the tutorial here:

http://shakenandstirredweb.com/240/jquery-moreless-text

但是我无法使用它.有人可以帮忙吗?

but I can not be a way to use it. Can anyone help?

推荐答案

我尝试使用以下代码:

1. 我将代码放在single.php中(在flexithemes.com开发的mytheme中:post-single.php)

<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> 

1. 我将下面的代码放在style.php中

.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
    }

1. 我之前将以下代码粘贴到文件header.php中

 <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>

结果: 文本成功切断，但是链接Readmore扩展文本无法正常工作. 我需要改进什么，以便扩展文本链接Readmore可以很好地工作.

Result: Text successfully cut off, but the link Readmore to expand text not working. What do I need to improve, so to expand text link Readmore can work well.

这篇关于如何在内容wordpress(single.php)中自动添加折叠/展开?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！