Detailed graphic explanation of how to use native JS to achieve accordion navigation effect

When you browse the website, have you noticed that there are many styles of navigation, such as breadcrumb navigation, drop-down menu navigation, accordion navigation, etc. As a front-end developer, do you know how to use native JS to implement accordion navigation? Effective? This article will tell you about the idea of ​​​​creating an accordion effect with native JS and the JS accordion effect code. It has certain reference value and interested friends can take a look.

Using JS to make accordion navigation requires a lot of JavaScript knowledge, such as toggle, for loop, if function, etc. If you are unclear, you can refer to the relevant articles on the PHP Chinese website, or visit JavaScript Video tutorial, I hope it can help you!

The idea of ​​​​implementing the accordion navigation effect: When the mouse clicks the first button, the content in the first button is displayed. When the second button is clicked, the content in the second button is displayed. And so on. In JavaScript, use a for loop to traverse how many buttons there are, and use the if function to determine the maxHeight to display and hide the button content. The specific code is as follows:

HTML part: Set three buttons and the corresponding Content

<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 part: Use CSS to beautify the page and achieve simple effects, such as the color becomes darker when the mouse passes over the button

.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 part: This is the key part of the accordion effect, which determines Can the button content be hidden and displayed?

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";
      } 
    }
  }

The effect is as shown below:

The above uses text, pictures and code to introduce to you how to use native JS To achieve the accordion navigation effect, friends who have never been exposed to it before must try it themselves and see if you can achieve such an effect by handwriting. Hope this article helps you!

For more related tutorials, please visit JavaScript Chinese Reference Manual

The above is the detailed content of Detailed graphic explanation of how to use native JS to achieve accordion navigation effect. For more information, please follow other related articles on the PHP Chinese website!