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

Question

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

我想一次只打开一个类别，基本上，点击图片2应打开图片2手风琴内容体，但关闭所有其他手风琴内容体。现在我需要再次点击每张图片来关闭它的身体。

希望这是有道理的。

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

＆＃13;

＆＃13;

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";
    }
  });
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是我能提出的一个小脚本。

我添加了下一个css类来控制手风琴的状态并避免使用js来执行css：

.accordion.active+div {
  display: block
}

脚本验证两件事

1. 如果有一个准备就绪
2. 如果单击的那个与打开的那个相同

我希望这有所帮助，如果你还需要其他任何东西我将会出现

＆＃13;
＆＃13;
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;
    }
  });
}
＆＃13;
.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
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

如果您使用的是jQuery库，请尝试使用

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

  

_{注意：我已从您的代码中删除了图片，只放置了视觉效果的数字}

Stack Snippet

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;