阅读更多关于使用 jQuery 的动态内容答案

【问题标题】：Read More for dynamic content using jQuery阅读更多关于使用 jQuery 的动态内容
【发布时间】：2014-07-18 07:09:51
【问题描述】：

我对@987654322@ 和网页设计非常陌生。

这里是代码

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

我想要的是。

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

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，但它不能像它已经显示的那样工作。

【问题讨论】：

你的Javascript在哪里？
我无法构建显示已显示元素所需的逻辑。
您可以尝试按最大高度设置动画。
或者您可以尝试为不透明度设置动画。就像淡入/淡出一样。
yup max-height 可能是个好主意，我会试一试。谢谢@Tushar

标签： jquery

【解决方案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;
});

【讨论】：

太棒了！！！谢谢图沙尔。这需要一些我可以管理的更改。非常感谢。

【解决方案2】：

为此，您可以使用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..

【讨论】：

感谢您的回答，但这不适用于动态内容。