用原生JS實現手風琴導航效果的方法是什么

這篇文章給大家分享的是有關用原生JS實現手風琴導航效果的方法是什么的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

實現手風琴導航效果的思路：當鼠標點擊第一個按鈕時，第一個按鈕里面的內容顯示出來，點擊第二個按鈕時，第二個按鈕里面的內容顯示出來，以此類推。在JavaScript中，用for循環遍歷有多少個按鈕，用if函數判斷maxHeight，從而實現按鈕內容的顯示和隱藏，具體代碼如下：

HTML部分：設置三個按鈕以及按鈕所對應的內容

<h3>手風琴動畫效果</h3>  
  <button class="btn">選項 1</button>
  <div class="p1">
    <p>內容1</p>
  </div> 
  <button class="btn">選項 2</button>
  <div class="p1">
    <p>內容2</p>
  </div> 
  <button class="btn">選項 3</button>
  <div class="p1">
    <p>內容3</p>
  </div>

CSS部分：用CSS美化頁面和實現簡單效果，比如當鼠標經過按鈕時顏色變深

.btn {
       background-color: #eee;
       color: #444;
       cursor: pointer;
       padding: 18px;
       width: 100%;
       border: none;
       text-align: left;
       outline: none;
       font-size: 15px;
       transition: 0.4s;
   }
   
   .btn.active,.btn:hover {
       background-color: #ddd;
   }  
   .p1 {
       padding: 0 18px;
       background-color: white;
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.2s ease-out;
   }

JavaScript部分：這是手風琴效果的關鍵部分，它決定了按鈕內容能不能隱藏和顯示

var btn = document.getElementsByClassName("btn");
  for (var i = 0; i < btn.length; i++) {
    btn[i].onclick = function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      } 
    }
  }

效果如下圖所示：

感謝各位的閱讀！關于用原生JS實現手風琴導航效果的方法是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！