当另一个手风琴面板打开时折叠手风琴面板

Posted 2023-03-24

【中文标题】当另一个手风琴面板打开时折叠手风琴面板

【英文标题】：Collapse accordion panel when another one opens

【发布时间】：2021-07-07 19:23:45

【问题描述】：

我得到了以下手风琴组件，现在我正试图找到一种方法来折叠手风琴面板，当另一个手风琴面板使用 vanilla javascript 打开时？ 我正在寻找同样适用于 IE11 的解决方案。 这一定很简单，但我完全是 Javascript 的菜鸟。 您的帮助和指导将不胜感激。 谢谢。

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

.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: #f8f8f8;


.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;

<button class="accordion">Panel 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">Panel 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><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">Panel 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>

【参考方案1】：

将先前展开的面板存储在一个变量中。

或者您可以找到展开的面板并应用适当的逻辑来折叠它。

var acc = document.getElementsByClassName("accordion");
var i;
var prevExpandedPanel = null;
for (i = 0; i < acc.length; i++) 
  acc[i].addEventListener("click", function() 
    if (prevExpandedPanel && this !== prevExpandedPanel)   
      prevExpandedPanel.classList.toggle("active");
      prevExpandedPanel.nextElementSibling.style.maxHeight = null;
    
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) 
      panel.style.maxHeight = null;
     else 
      panel.style.maxHeight = panel.scrollHeight + "px";
     
    prevExpandedPanel = this.classList.contains('active') ? this : null;
  );

.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: #f8f8f8;


.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;

<button class="accordion">Panel 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">Panel 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><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">Panel 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>

【讨论】：

这太棒了！非常感谢。

我只是注意到它实际上有一个错误。单击面板 1 并将其关闭。然后单击面板 2。您将看到面板 1 和面板 2 同时激活类。

@Nesta 我更新了你现在可以尝试的逻辑。

现在完美了。谢谢。