Question

我对jQuery和网页设计都很陌生。

这是代码

我有几个例子可以帮助我，但他们并不完全是我想要的。

我想要的是。

如果内容较少，应隐藏阅读更多内容。
点击阅读更完整的内容应该是可见的
文本应从阅读更多内容切换到更少阅读。
点击阅读较少的内容应具有以前的高度。

HTML

<div class="readMoreCnt">
<div class="row">
    <div class="span3">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <a href="" class="readMore">Read More</a>
    </div>
  <div class="span3">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <a href="" class="readMore">Read More</a>
    </div>
  <div class="span3">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet,</p>
    <a href="" class="readMore">Read More</a>
    </div>
</div>
<div class="row">
    <div class="span3">

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <a href="" class="readMore">Read More</a>
    </div>
  <div class="span3">

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor </p>

    <a href="" class="readMore">Read More</a>
    </div>
  <div class="span3">

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <a href="" class="readMore">Read More</a>
    </div>
</div>
  </div>

CSS

.readMoreCnt p {
  height: 145px;
  overflow: hidden;
  margin-top: 20px;
}

我无法知道如何展示已经存在的内容。

我可以slideUp和slideDown，但它无法正常显示。

Answer 1

为此目的，您可以使用jQuery.animate，如下所示。

$(".readMore").click(function(){
    if($(this).siblings("p").css("height") == "50px"){
         $(this).siblings("p").animate({
                                        height: "+=50"
                                      }, 200);
    }    
    else{
        $(this).siblings("p").animate({
                                        height: "-=50"
                                      }, 200);
    }
});

查看此Fiddle ..

注意：我将默认高度从145px更改为50px ..

使用jQuery阅读更多动态内容

1 个答案: