zoukankan      html  css  js  c++  java
  • 【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>
  • 相关阅读:
    2019-05-21 ping net telent命令的使用
    2019-05-21 黑客常用那几招
    2019-05-21 黑客简介
    2019-05-20 查看后台redis的进程
    清除img和文字间的空隙【vertical-align的用途】
    overflow溢出
    solr中的一些常见错误
    eclipse更改workspace中出现The superclass "javax.servlet.http.HttpServlet" was not found on the Java----问题》》
    maven遇到的一些问题
    null与“ ”
  • 原文地址:https://www.cnblogs.com/sangwl/p/10077541.html
Copyright © 2011-2022 走看看