php - WordPress 使用 jQuery 切换摘录和内容

Question

我在这里找到的代码部分解决了我在显示/隐藏主要内容和在 WordPress 主页面上显示摘录的问题。当我单击阅读更多按钮时，摘录突然消失并且主要内容不显示。

JQuery 不是我的强项，因此非常感谢任何帮助。

 $(function () {
 $('.mainContent').hide();
 $('a.read').click(function () {
     $(this).parent('.excerpt').hide();
     $(this).closest('.tenant').find('.mainContent').slideDown('fast');
     return false;
 });
 $('a.read-less').click(function () {
     $(this).parent('.mainContent').slideUp('fast');
     $(this).closest('.tenant').find('.excerpt').show();
     return false;
 });
 });


<div class="excerpt"><?php the_excerpt(); ?><a href="" class="read">Read More</a>  </div>
 <div class="mainContent"><?php the_content(); ?><a href="" class="read-less">Read Less</a></div>

Answer 1

尝试这个：

 $(function () {
     $('.mainContent').hide();
     $('a.read').click(function () {
         $(this).parent('.excerpt').slideUp('fast');
         $(this).closest('.tenant').find('.mainContent').slideDown('fast');
  //       $('.mainContent').show();
         return false;
     });
     $('a.read-less').click(function () {
         $(this).parent('.mainContent').slideUp('fast');
         $(this).closest('.tenant').find('.excerpt').slideDown('fast');
         return false;
     });
 });

演示在这里

Answer 2

你错过了 .tenant

尝试这个

<article class="tenant">
<div class="excerpt"><?php the_excerpt(); ?><a href="" class="read">Read More</a>  </div>
<div class="mainContent"><?php the_content(); ?><a href="" class="read-less">Read Less</a>    </div>
</article>