去评论
dz插件网

Discuz!论坛帖子内容页实现仿CSDN展开阅读全文效果

admin
2020/07/13 23:29:30
完整代码如下
JS代码

  1. function pd(ele,bili){//ele是展开阅读全文的点击按钮，bili是高度比例，一般为1
  2.     var n = $("div.article_content"),
  3.     e = n.children(),
  4.     l = e.length, //获取内容区域子元素的数量
  5.     h=0,c=0; //h是显示区域的高度，c是计数器，显示多少个元素
  6.     if (l > 20){
  7.         e.each(function(){
  8.             c += 1;
  9.             if (c<=20){h += $(this).height()}
  10.         })
  11.         n.css({//设置显示区域的高度
  12.             height: h * bili + "px",
  13.             overflow: "hidden"
  14.         })
  15.     }else{ele.parent().remove()}//少于20个元素就不用隐藏
  16. }

  18. (function(){
  19. var i = $(".btn-readmore"), //展开阅读全文的点击按钮
  20. n = $("div.article_content");
  21. i.click(function(){
  22. 　　$(this).parent().remove();//取消隐藏
  23. 　　n.css({height:'auto',});//高度自适应
  24. 　　n.after('{{lisnext|safe}}')//插入剩余内容，{{lisnext|safe}}是flask的调用内容，其他框架的自行修改。
  25. })
  26. pd(i, 1)
  27. })()


HTML代码
  1. <div class="article_content">{{lispre|safe}}</div>
  2. <div class="hide-article-box hide-article-pos text-center">
  3. 　　<a class="btn-readmore">
  4. 　　　　展开阅读全文
  5. 　　　　<i class="layui-icon layui-icon-down" copycode($('code_fbU'));">复制代码


进入原文参与互动