使用 ACF onclick 显示更多内容

Question

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

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

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

使用 ACF，我会：

• 图像字段
• 标题字段
• 摘录字段
• “显示更多”链接可打开所有内容
• 附加到摘录的完整内容字段
• “显示更少”链接以关闭内容
• 摘录字段 - 'show less' 隐藏

有人尝试过这样做吗？

Answer 1

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

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