手风琴条件打开和关闭功能

Question

我为我的移动视图实现了一个简单的手风琴菜单，其中包含可点击的图像作为菜单标题。

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

希望这是有道理的。

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

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 类来控制手风琴的状态并避免用 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>

Answer 2

如果你正在使用jQuery库，请尝试使用

• removeClass()
• addClass()
• siblings()
• next()

_{注意：我已从您的代码中删除了图像，并仅放置了数字用于视觉效果}

堆栈片段

$(".accordion").on("click", function() {
  $(".panel").removeClass("show");
  $(this).addClass("active").siblings(".accordion").removeClass("active")
  $(this).next(".panel").addClass("show");
});

.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: #000;
  color: #fff;
}

.panel.show {
  display: block
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">1</button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion">2</button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion">3</button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion">4</button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion">5</button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion">6</button>
<div class="panel">
  <p>Content body text</p>
</div>