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>