JS實現(xiàn)默認顯示部分文字點擊顯示全部（示例）

<body>
<div class="der_top">
<p class="der_oi">傳統(tǒng)的蘇州園林風格，高低錯落，深灰色屋面與白墻相襯，整個博物館宛若一座小園林。由新館和忠王府(舊館)兩部分組成，新館內(nèi)可看到遠古到近代的陶器等，忠王府內(nèi)，能看到蘇式彩繪。館內(nèi)設(shè)有吳地遺珍、吳塔國寶、吳中風雅、吳門書畫四個富有蘇州特色的常設(shè)展覽。
此外還有民俗展覽供游客了解蘇州一帶風俗習慣，還可以參觀太平天國時古建筑，感受當時的場景。</p>
<p class="der_oi">傳統(tǒng)的蘇州園林風格，高低錯落，深灰色屋面與白墻相襯，整個博物館宛若一座小園林。</p>
</div>
              <script>
        function show(){ 
        var pp = document.getElementsByClassName("der_oi"); 
        for (var i = 0; i < pp.length; i++) {
                var text =  pp[i].innerHTML; 
                // alert(text);
                
            var newtop = document.createElement("der_top"); 
            var newtop2 = document.createElement("der_top"); 
            var btn = document.createElement("a"); 
            newtop.innerHTML = text.substring(0,54); 
            newtop2.innerHTML = text; 
            newtop2.style.display="none";
            btn.innerHTML = text.length > 54 ? "...全文" : ""; 
            btn.href = "###"; 
            btn.onclick = function(e){ 
            if (e.target.innerHTML == "...全文"){ 
            e.target.innerHTML = "收起"; 
            e.target.previousSibling.previousSibling.innerHTML = e.target.previousSibling.innerHTML; 
            }else{ 
            e.target.innerHTML = "...全文"; 
            e.target.previousSibling.previousSibling.innerHTML = e.target.previousSibling.innerHTML.substring(0,54); 
            } 
            } 
            pp[i].innerHTML = ""; 
            pp[i].appendChild(newtop); 
            pp[i].appendChild(newtop2); 
            pp[i].appendChild(btn); 
            
            }
        } 
        show(); 
        </script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容