javascript - Accordion 条件打开和关闭功能

Question

我为我的移动 View 实现了一个简单的 Accordion 菜单，将可点击的图像作为菜单标题。

我想一次只打开一个类别，基本上，单击图片 2 应该打开图片 2 Accordion 内容主体，但关闭所有其他 Accordion 内容主体。现在我需要再次单击每张图片以关闭其正文。

希望这是有道理的。

到目前为止，这是我的代码:

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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  background-color: #fff;
  color: #444;
  cursor: pointer;
  width: 103%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin: -5px;
}

.bg {
  width: 100%;
}

.active,
.accordion:hover {
  background-color: #fff;
}

.panel {
  padding: 0 0px;
  display: none;
  width: 100%;
  background-color: white;
  overflow: hidden;
}

<button class="accordion"><div class="bolimg">
    <img class="bg" src="/files/0.jpg">
  </div></button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion"><img class="bg" src="/files/1.jpg"></button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion"><img class="bg" src="/files/2.jpg"></button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion"><img class="bg" src="/files/3.jpg"></button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion"><img class="bg" src="/files/4.jpg"></button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion"><img class="bg" src="/files/5.jpg"></button>
<div class="panel">
  <p>Content body text</p>
</div>

Answer 1

这是我可以想出的一个小脚本。

我添加了下一个 css 类来控制 Accordion 的状态并避免用 js 做 css:

.accordion.active+div {
  display: block
}

脚本验证了两件事

1. 如果已经有一个开放的
2. 如果点击的和打开的一样

我希望这对你有帮助，如果你需要什么我会在身边

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    if (open == this) {
      open.classList.toggle("active");
      open = null;
    } else {
      if (open != null) {
        open.classList.toggle("active");
      }
      this.classList.toggle("active");
      open = this;
    }
  });
}

.accordion {
  background-color: #fff;
  color: #444;
  cursor: pointer;
  width: 103%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin: -5px;
}

.bg {
  width: 100%;
}

.active,
.accordion:hover {
  background-color: #fff;
}

.panel {
  padding: 0 0px;
  display: none;
  width: 100%;
  background-color: white;
  overflow: hidden;
}

.accordion.active+div {
  display: block
}

<button class="accordion"><div class="bolimg">
    
    <img class="bg" src="/files/0.jpg">
   
       
  </div></button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion"><img class="bg" src="/files/1.jpg"></button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion"><img class="bg" src="/files/2.jpg"></button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion"><img class="bg" src="/files/3.jpg"></button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion"><img class="bg" src="/files/4.jpg"></button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion"><img class="bg" src="/files/5.jpg"></button>
<div class="panel">
  <p>Content body text</p>
</div>