Question

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

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

我在这里找到了教程：

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

但我无法使用它。有人可以帮忙吗？

Answer 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);
}

Answer 2

我尝试使用以下代码：

我把下面的代码放在single.php中（在mytheme开发的flexithemes.com：post-single.php）

＆＃13;

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

＆＃13;

我把下面的代码放在style.php

＆＃13;

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

＆＃13;

我先将下面的代码粘贴到文件header.php

＆＃13;

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

＆＃13;

<强>结果：文本成功切断，但链接Readmore扩展文本不起作用。我需要改进什么，所以扩展文本链接Readmore可以很好地工作。

如何在内容wordpress（single.php）中添加自动折叠/展开？

2 个答案: