【问题标题】: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】:

我尝试使用以下代码:

  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可以很好地工作。

【讨论】:

    猜你喜欢
    • 2011-04-20
    • 2014-03-26
    • 2014-09-20
    • 2014-04-02
    • 1970-01-01
    • 2014-03-23
    • 1970-01-01
    • 1970-01-01
    • 2012-07-15
    相关资源
    最近更新 更多