Question

我在jquery中对内容做了.toggle()个功能。但是当我点击“阅读更多”按钮时，文本链接消失，第一段变得不可见。

这是jQuery代码

 $(document).ready(function(){
    $('article p').hide();
    $('article p').eq(0).show();
    $('p.read-more').show();
    $('p.read-more').click(function(){
        $('article p').show('slow');
        $('article').css('background', '#f5f5f5').show('slow');
        $(this).text('Read Less');
        return false;
        });
    })

HTML代码

<article class="content">
<p>Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 
</p>

<p>Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 
</p>

<p>Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 
</p>
<p>Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 Dummy Text 1 
</p>
<p class="read-more">Read More</p>
</article>

Answer 1

这是我从一开始就隐藏其他P的建议。我将Read more更改为链接以获取手形光标并为其指定了ID，如果您有多个集合，则需要使用该类并且最接近找到要扩展其内容的父级

Live Demo

 $(function() {
    $("#more").on("click",function(e) {
      e.preventDefault();
      $(".content p:gt(0)").slideToggle("slow",function() {
        var visible = $(".content p:gt(0)").is(':visible');
        $("#more").text(visible ? 'Read less' : 'Read more');
        $('.content').css('background', visible ?'#f5f5f5' : '#fff');  
      });   
   });
});

使用这样的CSS：

.content p{
    display:none;
}
.content p:first-child { /* Or nth-child(n+3) if you want more than one */
    display:block;
}

Answer 2

我很确定这就是你的意思：

$('p:gt(0)').hide();
$('a.more').click(function () {
    $('p:gt(0)').show('slow');
});

http://api.jquery.com/gt-selector/

通过jquery在html中正确发生显示和隐藏

2 个答案: