案例：jQuery文本段落展开和折叠效果/点击查看更多、点击隐藏

上篇文章分享了两个即插即用的点击查看更多代码《即插即用：JS 点击“显示全部”、点击隐藏/折叠部分区域文字 - 特效代码》

今天分享个更好用的，需要jquery支持：

重点：文字高度不足指定数字，不显示查看更多！

!DOCTYPE html>
    head>
    meta http-equiv="Content-Type" content="text/html;
     charset=utf-8" />
    title>
    jQuery文本段落展开和折叠效果/title>
    style>
#wrapm {
    overflow: hidden;
}
 #read-more{
    text-align: center;
}
    /style>
    script src="https://www.yzktw.com.cn/zb_system/script/jquery-2.2.4.min.js" type="text/javascript">
    /script>
    script type="text/javascript">
$(function(){
     var slideHeight = 78;
     // px var defHeight = $('#wrapm').height();
     if(defHeight >
= slideHeight){
      $('#wrapm').css('height' , slideHeight + 'px');
      $('#read-more').append('a href="#">
    点击查看更多。。/a>
    ');
  $('#read-more a').click(function(){
       var curHeight = $('#wrapm').height();
   if(curHeight == slideHeight){
    $('#wrapm').animate({
     height: defHeight    }
    , "normal");
        $('#read-more a').html('点击隐藏');
        $('#gradient').fadeOut();
   }
else{
    $('#wrapm').animate({
     height: slideHeight    }
    , "normal");
        $('#read-more a').html('点击查看更多。。');
        $('#gradient').fadeIn();
   }
       return false;
  }
    );
   }
}
    );
    /script>
    /head>
    body>
      div id="wrapm" class="wrapm">
        div>
          p>
    今天是2017年4月份了，8月份的时候要回趟老家，老弟的第一个孩子要出生了，真的当舅舅了，时间时间过的太快了！列表长图，列表长图，列表长图列表长图，.../p>
          p>
    今天是2017年4月份了，8月份的时候要回趟老家，老弟的第一个孩子要出生了，真的当舅舅了，时间时间过的太快了！列表长图，列表长图，列表长图列表长图，.../p>
          p>
    今天是2017年4月份了，8月份的时候要回趟老家，老弟的第一个孩子要出生了，真的当舅舅了，时间时间过的太快了！列表长图，列表长图，列表长图列表长图，...今天是2017年4月份了，8月份的时候要回趟老家，老弟的第一个孩子要出生了，真的当舅舅了，时间时间过的太快了！列表长图，列表长图，列表长图列表长图，...今天是2017年4月份了，8月份的时候要回趟老家，老弟的第一个孩子要出生了，真的当舅舅了，时间时间过的太快了！列表长图，列表长图，列表长图列表长图，.../p>
          p>
    今天是2017年4月份了，8月份的时候要回趟老家，老弟的第一个孩子要出生了，真的当舅舅了，时间时间过的太快了！列表长图，列表长图，列表长图列表长图，.../p>
        /div>
        div id="gradient">
    /div>
      /div>
      div id="read-more">
    /div>
    /body>
    /html>
    

最近打算写的zblog模板主题要用上这个特效，所以特此备份！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！