【jquery】查看全文/收起 

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
          .content {
            width: 500px;
            background-color: #ccc;
            line-height: 26px;
          }
          a {
            text-decoration: none;
            color: red;
          }
      </style>
</head>
<body>
     <div class="content">
      2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。
      </div> 
</body>
<script src="jquery-1.3.1.min.js"></script>
<script>
      init();

     function init(){
        var len = 60;      //默认显示字数
        var ctn = $(".content");  //获取div对象
        var content = ctn.text();                   //获取div里的内容

       // alert(content);
        var span = "<span>"+content.substring(0,len)+"</span>";     //创建<span>元素
        var haha = content.length>len?"全文":"";
        var a = "<a href='javascript:void(0)' class='initAll'>"+haha+"</a>";           //创建<a>元素

        // 设置div内容为空，span元素 a元素加入到div中
        ctn.text("");
        ctn.append(span);
        ctn.append(a);


        $(".initAll").click(function(){
            var _this = $(this);
           // console.log(_this.text(),content)
            if(_this.text() == "全文"){      //如果a中含有"展开"则显示"收起"
                  _this.text("<<收起");
                  _this.prev('span').text(content);
            }else{
                 _this.text("全文");
                 _this.prev('span').text(content.substring(0,len));
            }
        });
     }
</script>
</html>

 

posted @ 2018-12-06 16:39  城别  阅读(858)  评论(0)    收藏  举报