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

演示here

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>

WordPress使用jQuery切换摘录和内容

2 个答案: