JS 實現段落展開和收起
阿新 • • 發佈:2021-11-06
實現
實現如圖所示的段落展開和收起功能:
分析
<div class="box"> <p id="content"> 人生最美是清歡;願有一屋,不被打擾,幸福終老 ;一襲江南夢,醉臥煙雨中;春在水墨中發芽 恬淡,禪裡開出的花 ;尋得一方庭院,做匠人 ;有一個院子,種花,畫畫 ;春未暖,花先開 中國青花藍,驚豔世界 ;尋一扇窗子,找到一份靜心 ;拖地澆花,春暖花開 ;尋一個小鎮,守一人終老。<br> 人生如一場修行,得意時,“一日看盡長安花”,艱難時,“潦倒新停濁酒杯”,但生命的跋涉不能回頭, 哪怕“畏途巉巖不可攀,也要“會當凌絕頂”,哪怕“無人會登臨意”,也要“猛志固常在”, 從經典中汲取“九萬里風鵬正舉”的力量,歷練“也無風雨也無晴”的豁然,“待到重陽日”,我們“還來就菊花”。</p> </div>
對此段落實現展示前100字,剩下的內容收起。
- 獲取該元素的 id 並得到段落全部內容
- 建立標籤<span>,並把 id 裡面的前100字放進去
- 建立標籤<a>,設為展開收起,點選實現效果
- 設定 id 內容為空,把標籤<span>和<a>插入進 id
js思想實現
<head> <meta charset="UTF-8"> <title>段落展開和收起</title> <style> .box { margin: 0 auto; width: 400px; height: 300px; border: 1px solid cadetblue; background-color: #efefef; border-radius: 10px; font-size: 15px; text-indent: 2em; } </style> </head> <body> <div class="box"> <p id="content"> 人生最美是清歡;願有一屋,不被打擾,幸福終老 ;一襲江南夢,醉臥煙雨中;春在水墨中發芽 恬淡,禪裡開出的花 ;尋得一方庭院,做匠人 ;有一個院子,種花,畫畫 ;春未暖,花先開 中國青花藍,驚豔世界 ;尋一扇窗子,找到一份靜心 ;拖地澆花,春暖花開 ;尋一個小鎮,守一人終老。<br> 人生如一場修行,得意時,“一日看盡長安花”,艱難時,“潦倒新停濁酒杯”,但生命的跋涉不能回頭, 哪怕“畏途巉巖不可攀,也要“會當凌絕頂”,哪怕“無人會登臨意”,也要“猛志固常在”, 從經典中汲取“九萬里風鵬正舉”的力量,歷練“也無風雨也無晴”的豁然,“待到重陽日”,我們“還來就菊花”。 </p> </div> <script> window.onload = function show(){ var len = 100; //預設顯示字數 var con = document.getElementById('content'); var content = con.innerHTML; //獲取段落內容 var span = document.createElement("span"); //建立<span>元素 var a = document.createElement("a"); //建立<a>元素 span.innerHTML = content.substring(0,len); //一開始span裡的內容為content的前len個字元 a.innerHTML = content.length>len?"...展開":""; //判斷顯示的字數是否大於預設顯示的字數 來設定a的顯示 a.href = "javascript:void(0)"; //讓a連結點選不跳轉 //點選時修改span標籤還有a標籤 a.onclick = function (){ if(a.innerHTML.indexOf("展開")>0){ //如果a中含有"展開"點選後則顯示"收起" a.innerHTML = "<< 收起"; span.innerHTML = content; //span標籤顯示所有字數 }else{ a.innerHTML = "... 展開"; span.innerHTML = content.substring(0,len); } } // 設定p內容為空,span元素 a元素加入到p中 con.innerHTML = ""; con.appendChild(span); con.appendChild(a); } </script> </body>