0

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

这是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>
4

2 回答 2

1

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

现场演示

 $(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;
}
于 2013-07-17T13:36:53.763 回答
0

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

$('p:gt(0)').hide();
$('a.more').click(function () {
    $('p:gt(0)').show('slow');
});
于 2013-07-17T13:26:05.223 回答