當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS实现文章的显示隐藏
生活随笔
收集整理的這篇文章主要介紹了
JS实现文章的显示隐藏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>文章顯示和隱藏</title><style type="text/css">div{border: 1px solid #A0C7FD;padding: 10px;}a{color: #0062CC;}</style></head><body><p>原文：唧唧復唧唧，木蘭當戶織。不聞機杼聲，唯聞女嘆息。 問女何所思，問女何所憶。女亦無所思，女亦無所憶。昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。阿爺無大兒，木蘭無長兄，愿為市鞍馬，從此替爺征。 東市買駿馬，西市買鞍韉，南市買轡頭，北市買長鞭。旦辭爺娘去，暮宿黃河邊，不聞爺娘喚女聲，但聞黃河流水鳴濺濺。旦辭黃河去，暮至黑山頭，不聞爺娘喚女聲，但聞燕山胡騎鳴啾啾。 萬里赴戎機，關山度若飛。朔氣傳金柝，寒光照鐵衣。將軍百戰死，壯士十年歸。 歸來見天子，天子坐明堂。策勛十二轉，賞賜百千強。可汗問所欲，木蘭不用尚書郎，愿馳千里足，送兒還故鄉。 爺娘聞女來，出郭相扶將；阿姊聞妹來，當戶理紅妝；小弟聞姊來，磨刀霍霍向豬羊。開我東閣門，坐我西閣床，脫我戰時袍，著我舊時裳。當窗理云鬢，對鏡貼花黃。出門看火伴，火伴皆驚忙：同行十二年，不知木蘭是女郎。 雄兔腳撲朔，雌兔眼迷離；雙兔傍地走，安能辨我是雄雌？</p><br /><br /><div id="box"></div><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><script type="text/javascript">window.οnlοad=function(){var content="唧唧復唧唧，木蘭當戶織。不聞機杼聲，唯聞女嘆息。 問女何所思，問女何所憶。女亦無所思，女亦無所憶。昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。阿爺無大兒，木蘭無長兄，愿為市鞍馬，從此替爺征。 東市買駿馬，西市買鞍韉，南市買轡頭，北市買長鞭。旦辭爺娘去，暮宿黃河邊，不聞爺娘喚女聲，但聞黃河流水鳴濺濺。旦辭黃河去，暮至黑山頭，不聞爺娘喚女聲，但聞燕山胡騎鳴啾啾。 萬里赴戎機，關山度若飛。朔氣傳金柝，寒光照鐵衣。將軍百戰死，壯士十年歸。 歸來見天子，天子坐明堂。策勛十二轉，賞賜百千強。可汗問所欲，木蘭不用尚書郎，愿馳千里足，送兒還故鄉。 爺娘聞女來，出郭相扶將；阿姊聞妹來，當戶理紅妝；小弟聞姊來，磨刀霍霍向豬羊。開我東閣門，坐我西閣床，脫我戰時袍，著我舊時裳。當窗理云鬢，對鏡貼花黃。出門看火伴，火伴皆驚忙：同行十二年，不知木蘭是女郎。 雄兔腳撲朔，雌兔眼迷離；雙兔傍地走，安能辨我是雄雌？";$("#box").html("<p>"+cutstr(content,100)+"</p>");}/** * js截取字符串，中英文都能用 * @param str：需要截取的字符串 * @param len: 需要截取的長度 */function cutstr(centent, len) {var str_length = 0;var str_len = 0;str_cut = new String();str_len = centent.length;for(var i = 0; i < str_len; i++) {a = centent.charAt(i);str_length++;if(escape(a).length > 4) {//中文字符的長度經編碼之后大于4 str_length++;}str_cut = str_cut.concat(a);if(str_length >= len) {str_cut = str_cut.concat("...<br /><a class='text-centent-show' data-show='" + centent + "' data-hide='" + str_cut + "' show='0' οnclick='showAll(this)'>全文</a>");return str_cut;}}//如果給定字符串小于指定長度，則返回源字符串； if(str_length < len) {return centent;}}//顯示全文function showAll(t) {var is_show = $(t).attr("show");//0：隱藏，1：顯示if(is_show<1){//隱藏-->顯示$(t).text("收起");$(t).attr("show",1);var content = $(t).attr("data-show");//獲取全文var html=$(t).prop('outerHTML');//讀取元素$(t).parent().html(content+"<br />"+html);//更改顯示內容//console.log(html);//alert("全文");//console.log(content);}else{//顯示-->隱藏$(t).text("全文");$(t).attr("show",0);var content = $(t).attr("data-hide");//獲取收縮內容var html=$(t).prop('outerHTML');//讀取元素$(t).parent().html(content+"<br />"+html);//更改顯示內容//alert("收起");//console.log(content);}}</script></body></html>
總結
以上是生活随笔為你收集整理的JS实现文章的显示隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 土壤PH值传感器 农业中土壤环境监测
- 下一篇： 移动端H5下拉触底事件异常处理