html+css 文本折疊
阿新 • • 發佈：2018-07-01
PE 新的 lin 方法 bst div .com 語法 折疊
先看效果：
收縮狀態
展開狀態
源代碼：
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>文本折疊測試</title> <style> .a-text { font-size: 20px;color: #b30000;cursor: pointer;} .a-text:hover { color: red;} .p1 {font-size: 16px;color: #0a001f;width: 500px; } .p2 { font-size: 16px; color: #0a001f; width: 500px; display: none; } </style> </head> <body> <p class="p1"> 1.substring 方法 定義和用法substring 方法用於提取字符串中介於兩個指定下標之間的字符。 語法stringObject.substring(start,stop)參數 描述start 必需。一個非負的整數， 規定要提取的子串的第一個字符在 stringObject 中的位置。stop 可選。一個非負的整數， 比要提取的子串的最後一個字符在 stringObject 中的位置多 1。如果省略該參數，那麽返回的 子串會一直到字符串的結尾。返回值一個新的字符串，該字符串值包含 stringObject 的一個子字符串， 其內容是從 start 處到 stop-1 處的所有字符，其長度為 stop 減 start。說明substring 方法返回的子串包 括 start 處的字符，但不包括 end 處的字符。如果 start 與 end 相等，那麽該方法返回的就是一個空串（即長度 為 0 的字符串）。</p> </body> <script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script> <script type="text/javascript"> $(function () { text_foled(‘.p1‘, 100); }); /** * jQuery 文本折疊展開特效 * @param clas：存放文本的容器 * @param num：要顯示的字數 */ functiontext_foled(clas, num) { var num = num; var a = $("<a></a>").on(‘click‘, showText).addClass(‘a-text‘).text("【展開】"); var b = $("<a></a>").on(‘click‘, showText).addClass(‘a-text‘).text("【折疊】"); var p = $("<p></p>").addClass(‘p2‘); var str = $(clas).text(); $(clas).after(p); if (str.length > num) { var text = str.substring(0, num) + "..."; $(clas).html(text).append(a); } $(‘.p2‘).html(str).append(b); function showText() { $(this).parent().hide().siblings().show(); } } </script> </html>
html+css 文本折疊