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

资料来源：网络整理时间：2023/3/4 0:56:22 共计：3605 浏览

上篇文章分享了两个即插即用的点击查看更多代码《即插即用：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模板主题要用上这个特效，所以特此备份！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery点击显示隐藏（简单）_js/jQuery | ·下一条：即插即用：JS 点击“显示全部”、点击隐藏/折叠部分区域文字 - 特效代码_js/jQuery