如何在内容 wordpress (single.php) 中添加自动折叠/展开？答案

【问题标题】：How to add automatically collapse/expand in content wordpress (single.php)?如何在内容 wordpress (single.php) 中添加自动折叠/展开？
【发布时间】：2016-05-21 03:36:42
【问题描述】：

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

但是有没有办法在内容 WordPress (single.php) 中添加自动折叠/展开？如果内容超过 50 字，则自动隐藏其余内容。

我在这里找到了教程：

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

但我不能以一种方式使用它。有人可以帮忙吗？

【问题讨论】：

你的意思是博客摘录吗？
可以，例如：网站goodreads.com的书籍描述（概要）中折叠/展开

标签： javascript php jquery wordpress plugins

【解决方案1】：

选项 1：

包括帖子摘录和帖子内容，用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>

在您的 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

$('.excerpt a[href="#"]').on('click', function() {
     e.preventDefault();
     $('.content').addClass('-show);
}
$('.content a.less-button').on('click', function() {
     e.preventDefault();
     $('.content').removeClass('-show);
}

【讨论】：

我现在看到它应该是可展开/可折叠的。编辑答案。
感谢 Tyler Untisz 先生的回答。代码工作正常。但是，我看不到任何指向更少/更多或展开/折叠以查看更多隐藏内容的链接。有什么想法吗？
你之前给的代码很好，我可以插入single.php，但是链接less/more不存在。对于第二个代码，我很困惑如何将它放在文件 single.php wordpress theme 中。
将前两行添加到 single.php 文件中，您可以将 css 添加到 style.css 中，对于 jquery 将其添加到 footer.php
更新了答案以包含更少的按钮。

【解决方案2】：

我尝试使用以下代码：

我把下面的代码放在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>

我把下面的代码放在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
    }

我将下面的代码粘贴到文件 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可以很好地工作。

【讨论】：