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

将此行添加到侦听器

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

并添加这些CSS规则

.container {
   border: 0px solid white;
}

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

Answer 2

创建一个.container.active类，并使用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>

当孩子活跃时将父div更改为活跃

2 个答案: