当孩子处于活动状态时，将父 div 更改为活动

Question

我正在开发根据教程here 创建的 CSS 可折叠菜单。

我有一个容器 div，它有一个按钮（手风琴），当它处于活动状态时，会显示内容（面板 div）。

当按钮处于活动状态时，我想在容器 div 周围放置一个边框。

当孩子（手风琴）处于活动状态时，有没有办法可以将 .container 设置为活动状态，这样我就可以定位它？还是在 CSS 中有更简单的方法？

感谢任何人的任何建议。我似乎无法让它工作:(

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

.container:hover {
  border: 1px solid #ededed;
}

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

<div class="container">
  <button class="accordion">Button text</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>
</div>

Answer 1

创建一个.container.active 类，并在JS 中使用this.parentNode.classList.toggle('active'); 切换它。

var acc = document.getElementsByClassName("accordion");
var i;

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

.container:hover {
  border: 1px solid #ededed;
}

.container.active {
  border: 1px solid black;
}

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

<div class="container">
  <button class="accordion">Button text</button>
  <div class="panel">
    <p>Test 3</p>
  </div>
</div>
<div class="container">
  <button class="accordion">Button text</button>
  <div class="panel">
    <p>Test 2</p>
  </div>
</div>
<div class="container">
  <button class="accordion">Button text</button>
  <div class="panel">
    <p>Test 3</p>
  </div>
</div>

Answer 2

将此行添加到侦听器

document.getElementsByClassName("container")
        .classList.toggle("active");

并添加这些 css 规则

.container {
   border: 0px solid white;
}

.container.active {
   border: 1px solid black;
}