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

如何解决当另一个面板打开时折叠手风琴面板

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

bool isSafeBridge(string bridge){
    for (int i = 0; i < bridge.length(); i++)
    {
        if (bridge[i] == ' ')
        {
            return false;
        }
        else{
            return true;
        }
    }
}

int main(){
    cout<<isSafeBridge("####");
}

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

解决方法

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

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

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,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet,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,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>