当我单击手风琴中的下一个项目时如何关闭上一个手风琴？答案

【问题标题】：How to close previous accordion when i click on next item in accordion?当我单击手风琴中的下一个项目时如何关闭上一个手风琴？
【发布时间】：2022-01-18 08:16:59
【问题描述】：

我创建了手风琴，但是当我点击 nect 手风琴时我想关闭以前的手风琴。但是当我点击下一个手风琴 previoes 手风琴没有关闭我该如何解决这个问题？请帮帮我

> <!DOCTYPE html> <html> <head> <meta name="viewport"
> content="width=device-width, initial-scale=1"> <style> .accordion {  
> background-color: #eee;   color: #444;   cursor: pointer;   padding:
> 18px;   width: 100%;   border: none;   text-align: left;   outline:
> none;   font-size: 15px;   transition: 0.4s; }
> 
> .active, .accordion:hover {   background-color: #ccc; }
> 
> .accordion:after {   content: '\002B';   color: #777;   font-weight:
> bold;   float: right;   margin-left: 5px; }
> 
> .active:after {   content: "\2212"; }
> 
> .panel {   padding: 0 18px;   background-color: white;   max-height:
> 0;   overflow: hidden;   transition: max-height 0.2s ease-out; }
> </style> </head> <body>
> 
> <h2>Accordion with symbols</h2> <p>In this example we have added a
> "plus" sign to each button. When the user clicks on the button, the
> "plus" sign is replaced with a "minus" sign.</p> <button
> class="accordion">Section 1</button> <div class="panel">   <p>Lorem
> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
> veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
> ea commodo consequat.</p> </div>
> 
> <button class="accordion">Section 2</button> <div class="panel">  
> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
> eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
> minim veniam, quis nostrud exercitation ullamco laboris nisi ut
> aliquip ex ea commodo consequat.</p> </div>
> 
> <button class="accordion">Section 3</button> <div class="panel">  
> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
> eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
> minim veniam, quis nostrud exercitation ullamco laboris nisi ut
> aliquip ex ea commodo consequat.</p> </div>
> 
> <script> var acc = document.getElementsByClassName("accordion"); var
> i;
> 
> for (i = 0; i < acc.length; i++) {   acc[i].addEventListener("click",
> function() {
>     this.classList.toggle("active");
>     var panel = this.nextElementSibling;
>     if (panel.style.maxHeight) {
>       panel.style.maxHeight = null;
>     } else {
>       panel.style.maxHeight = panel.scrollHeight + "px";
>     }    }); } </script>
> 
> </body> </html>

谢谢索马塞卡

【问题讨论】：

首先，当您单击手风琴时。在该孩子上切换活动类，当您单击其他孩子时，将在该孩子上切换活动类。您需要做的是在每个孩子点击时搜索活动类，并从每个孩子中删除活动类，并在该点击的孩子上添加活动类
你能告诉我我需要改变的地方吗
参考这个纯css解决方案codepen.io/Tuna_/pen/KKzXEVO

标签： javascript html jquery css

【解决方案1】：

您需要检查是否存在现有的active 类元素，并将其删除。否则你只是切换你点击的那个。

let acc = document.getElementsByClassName("accordion"); 
 
for (let i = 0; i < acc.length; i++) {   
  acc[i].addEventListener("click", function() {
    var panel = this.nextElementSibling;
    if(this.classList.contains('active')){
      this.classList.remove("active");
       panel.style.maxHeight = null;
    } else {
      if(document.querySelector('.accordion.active')){
        document.querySelector('.accordion.active').nextElementSibling.style.maxHeight = null;
        document.querySelector('.accordion.active').classList.remove('active');
      }
      this.classList.add("active");
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  

  }); 
}

.accordion{background-color: #eee;   color: #444;   cursor: pointer;   padding:
 18px;   width: 100%;   border: none;   text-align: left;   outline:
 none;   font-size: 15px;   transition: 0.4s; }
 
 .active, .accordion:hover {   background-color: #ccc; }
 
 .accordion:after {   content: '\002B';   color: #777;   font-weight:
 bold;   float: right;   margin-left: 5px; }
 
 .active:after {   content: "\2212"; }
 
 .panel {   padding: 0 18px;   background-color: white;   max-height:
 0;   overflow: hidden;   transition: max-height 0.2s ease-out; }

<h2>Accordion with symbols</h2> <p>In this example we have added a
"plus" sign to each button. When the user clicks on the button, the
"plus" sign is replaced with a "minus" sign.</p> <button
class="accordion">Section 1</button> <div class="panel">   <p>Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.</p> </div>

<button class="accordion">Section 2</button> <div class="panel">  
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p> </div>

<button class="accordion">Section 3</button> <div class="panel">  
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p> </div>

【讨论】：