时间戳

首页 > 解决方案 > 一次显示折叠内容

javascript - 一次显示折叠内容

问题描述

我找到了一些非常有用的教程来帮助我使用 javascript 来展开和折叠内容，但现在我不知道如何让它一次只展开一个......所以当一个 div 展开时，如果你点击展开另一个，它折叠第一个。有任何想法吗？这是我遵循的教程

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="collapsible"> Expand </button>
<div class="content">
  <p>Some content</p>
</div>

标签： javascriptjquerycss

解决方案

您可以选择所有的<div class="content">，然后将其中的每一个设置为display: none。片段如下：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    
    //add new code here
    var contents = document.querySelectorAll('div.content')
    contents.forEach((content) => {
    	content.style.display = "none"
    })
    
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
<button class="collapsible"> Expand </button>
<div class="content">
  <p>Some content</p>
</div>
<button class="collapsible"> Expand </button>
<div class="content">
  <p>Some content2</p>
</div>

希望这可以帮助

推荐阅读