使用jQuery实现查看全文的功能，亲测有效

攻城狮凌霄

于 2021-10-07 09:47:58 发布

阅读量487

点赞数

CC 4.0 BY-SA版权

文章标签： jquery html5 css

本文链接：https://blog.csdn.net/lcz_LYF/article/details/120632785

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery1.7.2.min.js"></script>
    <title>查看更多---收起：细数逝去的过往</title>
    <style>
      .z_content_right_two {
        width: 978px;
        border: 1px solid #fff;
        padding: 10px;
        font-size: 14px;
        color: #666666;
        margin: 20px auto;
        text-indent: 30px;
        line-height: 22px;
        text-align: justify;
        background: #fff;
      }
      .ckgd {
        color: #00b1bb;
        text-decoration: none;
        display: inline-block;
        margin-left: -27px;
        text-decoration: underline;
      }
      .ckgd:hover {
        color: #00b1bb;
        text-decoration: none;
      }
      .shouqi {
        text-align: right;
        padding: 5px 20px;
      }
      .z_zixunhuifu {
        width: 8px;
        height: 8px;
        border: 1px solid red;
        background: red;
        -moz-border-radius: 50%;
        -o-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        position: absolute;
        margin-left: 122px;
        margin-top: -28px;
      }
      .z_xian {
        color: #ddd;
      }
    </style>
</head>
<body>
    <div class="z_content_right_two z_box_z">

新手爸妈应该都有过对宝宝出现突发情况时那种束手无策的情况，甚至有些新手宝妈有着一个“新手宝妈”的群。

这时群里的宝妈们你一人我一嘴地说着建议，这时候该听谁的呢？还是全部都用上？千万别乱来，宝宝的肠胃可是很脆弱的，十八般武艺齐上阵？宝宝可不是小玩偶。并且宝宝便秘跟成年人的情况是不一样的

首先应该了解一下什么是宝宝便秘？

便秘是指孩子大便很硬，排便次数少于正常情况。这是一种非常常见的胃肠道 (GI) 问题
新手爸妈应该都有过对宝宝出现突发情况时那种束手无策的情况，甚至有些新手宝妈有着一个“新手宝妈”的群。

首先应该了解一下什么是宝宝便秘？

</div>
</body>
<script>
    $(function() {
      var max = 330,
        display = "...显示全部";
      $(".z_content_right_two").on("click", ".ckgd", function() {
        var me = this,
          show = $(me).text() == display,
          attr = show ? "his" : "sub",
          name = show ? "收起" : display;
        $(this).parent().each(function() {
          $(this).html($(this).attr(attr)).append($(me).clone(true).text(name));
        });
      });
      $(".z_box_z").each(function() {
        var me = this,
          html = $(me).html(),
          text = getElementText(me),
          length = text.length,
          sub = text.substr(0, max);
        $(me).attr({
          his: text,
          sub: sub
        });
        if(length > max) {
          $(me).html(sub);
          $(me).append(
            $("<a href='javascript:void(0)' class='ckgd'>".concat(display, "</a>"))
          );
        }
      });
    });
    function getElementText(e) {
      var t = "";
      //如果传入的是元素，则继续遍历其子元素
      //否则假定它是一个数组
      e = e.childNodes || e;
      //遍历所有子节点
      for(var j = 0; j < e.length; j++) {
        //如果不是元素，追加其文本值
        //否则，递归遍历所有元素的子节点
        t += e[j].nodeType != 1 ? e[j].nodeValue : text(e[j].childNodes);
      }
      //返回区配的文本
      return t;
    }
</script>
</html>