javascript - 切换效果 了解更多

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

使用隐藏和切换代替:

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

toggleParas.hide();

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