圖文詳解如何以原生JS實現手風琴導航效果-js教程-PHP中文網

圖文詳解如何以原生JS實現手風琴導航效果

yulia

發布： 2018-10-25 13:50:41

原創

3944 人瀏覽過

大家在瀏覽網站時，有沒有註意到導航的樣式有很多種，例如麵包屑導航、下拉選單導航，手風琴導航等等，那作為一個前端開發人員，你知道如何用原生JS實現手風琴導航效果嗎？這篇文章就跟大家講講原生JS製作手風琴效果的思路以及JS手風琴效果代碼，有一定的參考價值，有興趣的小伙伴可以看看。

用JS製作手風琴導航需要用到很多JavaScript知識，比如toggle，for循環，if函數等等，如有不清楚的同學可以參考PHP中文網的相關文章，或者訪問JavaScript影片教學，希望可以幫助你！

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

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

<h2>手风琴动画效果</h2>  
  <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實現手風琴導航效果