时间戳

首页 > 解决方案 > 使用 ACF onclick 显示更多内容

toggle - 使用 ACF onclick 显示更多内容

问题描述

我正在尝试创建一个具有图像、标题、摘录和内容的 ACF。我想让它像这个页面http://ashmitar.sg-host.com/our-team/

我想从 ACF 中提取数据，以便我的客户可以更新。文本摘录应为 50 字，然后单击“阅读更多”（隐藏显示更少）并显示完整内容（附加到摘录）并显示更少按钮以关闭带有链接“显示更少”的摘录（隐藏显示更多）。

我可以使用 javascript 来完成，但这不是可以轻松更新的东西，因为每个团队成员的按钮 ID 必须不同等。

使用 ACF，我将拥有：

有人尝试过做这样的事情吗？

标签： toggleadvanced-custom-fields

解决方案

经过大量研究，我想出了这个解决方案。希望它可以帮助其他人：

<h2 class="team-member-name"><?php the_field('team_member_name'); ?> </h2>
<div class="post">
<div class="excerpt"><?php echo wp_trim_words( get_field('bio_excerpt'), 50 ); ?></div>
<div class="whole-post"><?php echo wp_trim_words( get_field('bio_full'), 250 ); ?></div>
<a href="javascript:void();" class="read">Read More</a>
</div>

这是 jQuery

$('a.read').click(function () {
    $(this).siblings('.whole-post').is(':visible') ? $(this).html('Read More') : $(this).html('Read Less');
     $(this).siblings('.excerpt').slideToggle(200);
     $(this).siblings('.whole-post').slideToggle(200); 
});

推荐阅读