时间戳

首页 > 解决方案 > 当另一个手风琴面板打开时如何关闭手风琴面板？

javascript - 当另一个手风琴面板打开时如何关闭手风琴面板？

问题描述

我的静态 HTML/CSS/JS 网站上有手风琴小部件。

默认情况下，所有手风琴都是关闭的。

用户可以打开它们中的任何一个，并且这些将保持打开状态，直到用户通过单击手风琴标题手动关闭它们。

当用户单击打开另一个手风琴时，如何关闭以前打开的手风琴？

我使用这个模板创建了我的手风琴：https ://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate

我将 HTML 和 JS 都放在了 HTML 文件中：

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 {
  color: #fff;
  background-color: #00000042;
  cursor: pointer;
  padding: 10px 10px;
  margin-top:20px;
  width: 100%;
  border: 1px solid #00000042;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #00000042;
  border: 1px solid #fc8e2d;
}

.panel {
  padding: 0 18px;
  font-size: 18px;
  background-color: #00000042;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
<button class="accordion"><span class="faq__question-heading">Title1</span></button>
<div class="panel">
  <p style="padding:18px 0;">description1</p>
</div>

<button class="accordion"><span class="faq__question-heading">Title2</span></button>
<div class="panel">
  <p style="padding:18px 0;">description2</p>
</div>

<button class="accordion"><span class="faq__question-heading">Title3</span></button>
<div class="panel">
  <p style="padding:18px 0;">description3</p>
</div>

<script>

</script>

标签： javascripthtmlcss

解决方案

maxHeight只需将其他人的属性重置为空，<script>如下所示：

<!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;
    }
    
    .panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }
  </style>
</head>

<body>

  <h2>Animated Accordion</h2>
  <p>Click on the buttons to open the collapsible content.</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");

    for (let i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        for (j = 0; j < acc.length; j++) {
          if (j !== i)
            acc[j].nextElementSibling.style.maxHeight = null;
        }
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      });
    }
  </script>

</body>

</html>

推荐阅读