当 child 处于活动状态时，将 parent div 更改为活动

Question

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

我有一个容器 div，它有一个按钮（手风琴），激活时显示内容（面板 div）。

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

有没有一种方法可以在 child（手风琴）处于活动状态时将 .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

将此行添加到侦听器

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

并添加这些 css 规则

.container {
   border: 0px solid white;
}

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

Answer 2

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

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>

当 child 处于活动状态时，将 parent div 更改为活动

Change parent div to active when child is active

javascript

css

collapsable