js實現點擊展開收起

HTML代碼：

<div>
      <span>
         <h1 class="title">如何才能做到活在當下？</h1>
         <p>我們先反問一句，找出原因——為什么很多人不能活在當下？無非是這十二個字：沉溺過去。焦慮未來。不喜當下。誰都想一步一個腳印，一生順遂，平安喜樂，但這幾乎是不可能的。其實很多人並未真正搗入生活的深處，只輕輕碰一腳就縮了回來，利用頭腦里的假設，逃遁到消逝的過去與遙遠的未來里。時間久了，你會感到渾渾噩噩，空虛感包圍自己，才想起要活在當下。又問，什么是活在當下？——活在當下，是既要活在當下的歡樂中，又要活在當下的痛苦中。除此之外，還有離別，苦悶，現實，虛假，窘態，破碎，邋遢等等。</p>
         <p>如何才能做到活在當下？面對這些，你要時常同自己講：不要害怕。不要失落。不要擔心。使自己保持平靜，然后我們一步一步來。首先，要做到不沉溺於過去，暫且封鎖回憶。過去的事情總是美好的，即便不好，套上回憶的軀殼，也是好的。你把每一次哭泣，每一次歡愉，都拾起來裝了一兜，重得要死，偏偏你還要馱着它們前進，因為你舍不得，放不下。那些不好的事情，你試圖通過回憶去重新定格它，將它變成好的。而那些原本就好的事情，你也不放過，在想象里把它變得更好。回憶是不能篡改的，它只提供一條追隨的通道，是一種誘惑，誘着你往回跑。你要適時地止步，站定在那里，看一眼后，轉身繼續往前走。</p>
         <p> 其次，要做到對未來不焦慮，保持平常心。人一旦焦慮，就會橫沖直撞，別人說什么就是什么，別人怎么做你就跟着怎么做，失去自我。你要知道，你才是你整個生命中最重要的支點，只有每一步走踏實了，你的靈魂才能被立起。</p>
         <p> 接着，不逃避當下，認真、專心去着手眼前的事。這時，我們要學會憑一瞬的直覺去確認，如果這件事不做會后悔的，那就立即去做。爭取把即將被延誤的事情，放到當下。想要心無雜念地活在當下，光做到上面這一點還不夠，你還要收回意識，放開感官，像一位藝術創作者那樣去感受當下。你要讓身邊的事物看起來舒適，讓自己覺得滿意。你要愛上此刻的自己，愛上目之所及的一切。</p>
         <p>這樣，你才不至於因不喜歡當下，而選擇了逃避。你才不至於在承下的那一刻，滿目驚慌，支離破碎。所有的美好事物，你都該盛下，那些不好的，你也能盛下，因為你這副單薄的軀體是世間頂好的容器。生來是為了接受。世事無常，一切處在變化當中。每一天、每一天都更遠離秋天。珍惜當下。</p>
      </span>
      <a href="javascript:;">收縮</a>
   </div>

 

CSS代碼：

 div {
         width: 1200px;
         margin: 40px auto;
         border: 2px solid #f2f2f2;
         padding: 20px;
      }
      .title{
         text-align: center;
         font-size: 24px;
         
      }
      p{
         text-indent: 2em;
         text-align: justify;
      }

 

JS代碼：

<script>
      window.onload = function () {
         var span = document.getElementsByTagName("span")[0];
         console.log(span);
         var btn = document.getElementsByTagName("a")[0];
         //拿到所有文字
         var str = span.innerHTML;
         //設置一個開關，記錄展開和收縮
         var isOn = true;
         //btn添加事件，在事件里修改span文字
         btn.onclick = function () {
            //點擊按鈕的時候改變開關的值
            isOn = !isOn;
            if (isOn == true) {
               span.innerHTML = str;
               btn.innerHTML = "收縮";
            } else {
               //收縮
               span.innerHTML = str.substring(0, 300) + "...";
               btn.innerHTML = "展開";
            }
         }
      }