jquery - 阅读更多内容以了解使用 jQuery 的动态内容

Question

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

这是代码

http://codepen.io/anon/pen/rxvCe

我有一些例子可以帮助我，但它们并不完全是我想要的。

我想要的是。

1. 如果内容较少，则应隐藏更多内容。
2. 点击“阅读”后应该可以看到更完整的内容
3. 文本应从“多读”切换为“少读”。
4. 点击阅读较少内容时应具有之前的高度。

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

这是DEMO .

您需要添加更多的 div 并获取子级的高度并将其应用到父级。

JQUERY

/*To hide read more if content is less*/
$('.inCnt').each(function(){
  if ($(this).height() <= 145) {
    $(this).parent('.inner').next('.readMore').hide()
  }
})

$('.readMore').click(function(){
  var cntHeight = $(this).parent('.span3').find('.inCnt').height();
  if ($(this).hasClass('active')) {
    $('.readMore').removeClass('active').html('Read More'); 
    $('.inner').animate({
      maxHeight: '145px'
    });
  } else {
    $('.readMore').removeClass('active').html('Read More'); 
    $('.inner').animate({
      maxHeight: '145px'
    });
  $(this).prev('.inner').animate({
      maxHeight: cntHeight
    }, function(){
    $(this).next('.readMore').addClass('active').html('Read Less');
  });
  }
  return false;
});