jquery - 使用 jQuery 自动化阅读更多 Div

Question

我正在研究一种证明格式，其中显示第一段，其余段落包含在“阅读更多”显示链接后面。在此处查看实际效果:http://wlvrtn.com/sites/nms-site2/

我想做的是:我不想在“阅读更多”段落周围手动包装一个 div 并在其后放置一个按钮链接，而是想在 jQuery 中自动执行此操作。

jQuery 是否可以嗅探出所有 block 引用中的段落数？它会在第 1 段之后的任何内容周围放置一个 div 标签，并在其后跟一个“阅读更多”href。

我对你最好。谢谢。

---

<section class="review">            

    <blockquote>

        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.</p>

            <!-- BEGIN READ MORE -->                
            <div class="review-continued">

            <p>Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

            <p>Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor.</p>

            </div>         
            <a href="#" class="read-more">Read More +</a>       
            <!-- END READ MORE -->

    </blockquote>

    <cite>– Dr. John Doe, M.D., Livermore, CA</cite>

</section>

Answer 1

应该这样做:

$('.review blockquote').each(function () {
    $('p:gt(0)', this).hide();
    var paras = this;
    $('a.read-more', this).click(function () {
        $('p:gt(0)', paras).slideToggle();
    });
});

jsFiddle example