文章點選展開和收起詳解
在很多實際應用中,有這樣的效果,那就是隻顯示文章的一部分,其餘的部分用省略號替代,後面跟著一個類似展開的按鈕,這也許是為了節省空間或者其他目的,下面就通過程式碼例項介紹一下如何實現此功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .box { width:300px; } .unfold, .pack { display: none; color: red; cursor: pointer; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function(){ var box = $('#ant').text(); function cutText() { if (box.length > 30) { $('.unfold').show(); $('#ant').text(box.substr(0, 30) + "..."); }; }; cutText(); $('.unfold').click(function () { $('#ant').text(box); $(this).hide(); $('.pack').show(); }); $('.pack').click(function () { cutText(); $(this).hide(); }); }) </script> </head> <body> <div class="box"> <span id="ant">螞蟻部落歡迎您,只有努力奮鬥才會有美好的未來,沒有任何人一開始就是高手softwhy.com</span> <span class="unfold">展開</span> <span class="pack">收起</span> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(document).ready(function(){}),當文件結構完全載入完畢再去執行函式中的程式碼。
(2).var box = $('#ant').text(),獲取指定元素中的文字內容。
(3).function cutText() {},此函式實現了擷取字串的功能。
(4).if (box.length > 30) { $('.unfold').show();
$('#ant').text(box.substr(0, 30) + "...");
},如果文字內容的長度大於30,那麼就顯示展開按鈕,並且擷取欠30個字元,其餘的用三個點替代。
(5).cutText(),執行擷取操作。
(6).$('.unfold').click(function () {
$('#ant').text(box);
$(this).hide();
$('.pack').show();
}),為展開按鈕註冊click事件處理函式。
點選此按鈕,可以顯示所有文字。
並隱藏當前按鈕,同時顯示收起按鈕。
(7).$('.pack').click(function () {
cutText();
$(this).hide();
}),為收起按鈕註冊click事件處理函式。
點選之後進行擷取操作,並且顯示展開按鈕。
二.相關閱讀:
(1).text()可以參閱jQuery text()一章節。
(2).show()可以參閱jQuery show()一章節。
(3).substr()可以參閱javascript substr()一章節。
相關文章
- 點選右則剪頭展開和收起頁面選單
- iOS tableviewcell裡點選文字展開與收起功能iOSView
- jQuery點選展開收起程式碼例項jQuery
- JavaScript點選div塊展開和收縮效果詳解JavaScript
- 安卓開發 點選空白處收起鍵盤安卓
- jQuery點選展開摺疊手風琴導航選單詳解jQuery
- FairyGui--實現點選按鈕使UI欄開啟和收起AIGUI
- JavaScript段落展開收起效果JavaScript
- div以滑動方式展開和收起程式碼
- vue實現展開全部,收起全部Vue
- 文字超長,實現展開收起功能...
- js垂直右側展開導航選單詳解JS
- iOS閱讀類需求 展開 收起章節 卡頓解決辦法iOS
- Android自定義View——從零開始實現可展開收起的水平選單欄AndroidView
- 基於JQuery的自定義樹形選單表格,實現展開、收起效果jQuery
- swift點選Tableviewcell展開下拉選單內容SwiftView
- 點選側邊欄展開和收縮程式碼例項
- 康託展開+逆展開(Cantor expension)詳解+優化優化
- jquery實現的點選返回頂部和底部特效詳解jQuery特效
- JavaScript點選按鈕返回底部詳解JavaScript
- jquery 設定百度商橋預設收起不展開jQuery
- 點選可以展開和關閉的搜尋框程式碼例項
- 小程式迴圈列表點選展開收縮
- 點選Cell控制UITableViewCell的展開及關閉UIView
- jQuery垂直可摺疊展開導航選單程式碼例項詳解jQuery
- 點選新增或者刪除表格行詳解
- 點選平滑下拉展開摺疊樹形導航選單
- JavaScript 檢視全文和收起JavaScript
- 點選標題可以展開效果程式碼例項
- JavaScript核取方塊全選和全不選詳解JavaScript
- 氣泡排序和選擇排序詳解排序
- 點選標題下拉展開二級子標題導航選單
- 短視訊系統原始碼,點選螢幕空白處鍵盤不自動收起原始碼
- jQuery實現的點選展開其他專案摺疊導航選單jQuery
- 點選返回頂部效果實現程式碼詳解
- 快點說小程式開發詳解
- Oracle完全檢查點和增量檢查點詳解Oracle
- 影片直播APP原始碼,透過css控制div內容展開更多/收起效果APP原始碼CSS