使用jQuery切换摘录和内容

我已经看过这个链接：Toggle Posts in wordpress using jquery但它不幸没有做我想做的事。我有一个自定义帖子类型。我想要的是“阅读更多”链接的摘录。我明白了。但我希望阅读更多链接切换/滑动切换文章中的全部内容。还有一个“更少阅读”的链接，可以回溯显示摘录。使用jQuery切换摘录和内容

编辑：这是我工作的脚本...谁能告诉我，如果这太多了。它现在有效，但我不知道是否有更简单的方法。

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

然后我的查询：

<?php query_posts('post_type=tenants'); ?> 
    <?php if (have_posts()) while (have_posts()) : the_post(); ?> 
    <article class="tenant"> 
     <div class="tenant-header"> 
     <?php the_post_thumbnail('thumbnail', array('class' => 'left')); ?> 

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

<?php endwhile; ?>

再次编辑：当多个职位中，和你打从其他岗位“更多”的文字消失： - /所以我猜这个“几乎是”正确的代码

来源

2013-07-24 Christi Yarema

但是，您是否尝试过*以适应该代码？有用的指导：[问] – brasofilo

是的，我放弃了大约1.5小时。 :(jQuery不是我最强的技巧 –

没问题，但是显示*你的代码*。指定*什么*不工作，并阅读[documentation]（http://api.jquery.com/toggle/），你可以[编辑]问题 – brasofilo

是的，你很接近，但使用$('.excerpt').hide();将隐藏在页面excerpt类，这就是为什么你需要引用点击的元素，并在文章中相应的内容显示/隐藏所有元素：

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

来源

2013-07-24 22:30:28

你真了不起！谢谢你。 –

使用jQuery切换摘录和内容

回答

相关问题