关闭手风琴

Question

在此手风琴中，如果单击标题，则面板将打开。

我想在点击段落元素中的“关闭”时关闭面板。

使用html / css / javascript有一种简单的方法吗？

.greenBar {
  background-color: rgb(148, 175, 111);
  color: white;
  padding: 15px 15px;
  margin: 0px;
  font-size: 115%;
}

.darkGreenBar:hover {
  background-color: rgb(112, 149, 62);
  color: black;
  cursor: pointer;
  text-decoration: underline;
}

.blueBar {
  background-color: rgb(118, 166, 183);
  color: white;
  padding: 15px 15px;
  margin: 0px;
  font-size: 115%;
}

.darkBlueBar:hover {
  background-color: rgb(49, 124, 143);
  color: black;
  cursor: pointer;
  text-decoration: underline;
}

.panel {
  display: none;
}

.panel.show {
  display: block;
}

<p class="greenBar darkGreenBar showHide">Schools</p>
<div class="panel">
  <p>Here is where content goes.
  </p>
  <p>close</p>
</div>
<p class="blueBar darkBlueBar showHide">Parks and Trails</p>
<div class="panel">
  <p>Here is where content goes.
  </p>
  <p>close</p>
</div>
<p class="greenBar darkGreenBar showHide">City Projects</p>
<div class="panel">
  <p>Here is where content goes.
  </p>
  <p>close</p>
</div>
<script>
  var acc = document.getElementsByClassName("showHide");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
      this.nextElementSibling.classList.toggle("show");
    }
  }
</script>

Answer 1

这应该可以解决问题。我刚刚重复了你已经为标题点击事件所做的事情，但却得到了父元素。

var acc = document.getElementsByClassName("showHide");
var close = document.getElementsByClassName("close");

for (var i = 0; i < acc.length; i++) {
  acc[i].onclick = function(){
    var nextSibling = this.nextElementSibling;
    nextSibling.classList.toggle("show");
  }
}

for (var i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    this.parentNode.classList.toggle("show");
  }
}

.greenBar {
  background-color: rgb(148,175,111);
  color: white;
  padding: 15px 15px;
  margin: 0px;
  font-size: 115%;
}
.darkGreenBar:hover {
  background-color: rgb(112,149,62);
  color: black;
  cursor: pointer;
  text-decoration: underline;
}
.blueBar {
  background-color: rgb(118,166,183);
  color: white;
  padding: 15px 15px;
  margin: 0px;
  font-size: 115%;
}
.darkBlueBar:hover {
  background-color: rgb(49,124,143);
  color: black;
  cursor: pointer;
  text-decoration: underline;
}
.panel {
  display: none;
}
.panel.show {
  display: block;
}

<p class="greenBar darkGreenBar showHide">Schools</p>
<div class="panel">
  <p>Here is where content goes.</p>
  <p class="close">close</p>
</div>
<p class="blueBar darkBlueBar showHide">Parks and Trails</p>
<div class="panel">
  <p>Here is where content goes.</p>
  <p class="close">close</p>
</div>
<p class="greenBar darkGreenBar showHide">City Projects</p>
<div class="panel">
  <p>Here is where content goes.</p>
  <p class="close">close</p>
</div>

如果你感兴趣，这是jQuery版本。

$(document).ready(function(){
  $('.showHide').click(function() {
    $(this).next().toggle();
  });
  $('.close').click(function() {
    $(this).parent().toggle();
  });
});

.greenBar {
  background-color: rgb(148,175,111);
  color: white;
  padding: 15px 15px;
  margin: 0px;
  font-size: 115%;
}
.darkGreenBar:hover {
  background-color: rgb(112,149,62);
  color: black;
  cursor: pointer;
  text-decoration: underline;
}
.blueBar {
  background-color: rgb(118,166,183);
  color: white;
  padding: 15px 15px;
  margin: 0px;
  font-size: 115%;
}
.darkBlueBar:hover {
  background-color: rgb(49,124,143);
  color: black;
  cursor: pointer;
  text-decoration: underline;
}
.panel {
  display: none;
}
.panel.show {
  display: block;
}

<p class="greenBar darkGreenBar showHide">Schools</p>
<div class="panel">
  <p>Here is where content goes.</p>
  <p class="close">close</p>
</div>
<p class="blueBar darkBlueBar showHide">Parks and Trails</p>
<div class="panel">
  <p>Here is where content goes.</p>
  <p class="close">close</p>
</div>
<p class="greenBar darkGreenBar showHide">City Projects</p>
<div class="panel">
  <p>Here is where content goes.</p>
  <p class="close">close</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Answer 2

您可以使用parentElement。

来完成此操作

Here's the fiddle.