切换效果阅读更多

Question

<div class="post-content">
        <p>Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text </p>
        <p>More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text </p> 
        <span class="more">more/less</span>
</div>

---

$('.post-content p:not(:first-child)').css('display', 'none');

$(".more").click(function () {
    $('.post-content p:not(:first-child)').css('display', 'block');
});

demo

问题很明显。我需要制作一个toogle效果，以便在第一段之后隐藏所有p。

Answer 1

改为使用hide和toggle：

// cache elements so you don't repeatedly query the DOM
toggleParas = $('.post-content p:not(:first-child)');

toggleParas.hide();

$(".more").click(function () {
    toggleParas.toggle();
});

Answer 2

Demo

$('.post-content p:eq(1)').hide();

$(".more").click(function () {
   $(this).prev('p').slideToggle();
});