使用javascript展开/隐藏可折叠文件

我想实现可扩展菜单。只能展开一个标题。当用户单击另一个按钮时，先前的 扩展标题应该隐藏。我使用了w3schools的代码，但我不知道如何自动隐藏上一个标题

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

可折叠
可折叠的：

开放式可折叠
正文

可折叠集：

开放式第一节
正文

开放式第2节
文本

开放式第3节
正文

简单折叠打开的可折叠

点击

by JS:

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

.content{
不透明度：0；
过渡：不透明度0.5s；
}

可折叠
可折叠的：

开放式可折叠
正文

可折叠集：

开放式第一节
文本1

开放式第2节
文本2

开放式第3节
文本3

一种更具可读性的方法是将代码分成函数，如下所示：

<script>
    function hideOthers(actual) {
      var contentDivs = document.querySelectorAll('.content');
      contentDivs.forEach(others => {
        if (others !== actual) {
          others.style.display = 'none';
        }
      });
    }

    function toggleDisplay(div) {
      if (div.style.display === "block") {
        div.style.display = "none";
      } else {
        div.style.display = "block";
      }
    }

    function onContentLoaded() {
      var collapsibleDivs = document.querySelectorAll(".collapsible");

      collapsibleDivs.forEach(div => {
        div.addEventListener('click', e => {
          var clicked = e.srcElement;
          var sibling = clicked.nextElementSibling;

          toggleDisplay(sibling);
          hideOthers(sibling);
        })
      })
    }

    document.addEventListener("DOMContentLoaded", onContentLoaded);
  </script>

功能隐藏者（实际）{
var contentDivs=document.querySelectorAll（'.content'）；
contentDivs.forEach（其他=>{
如果（其他！==实际）{
others.style.display='none'；
}
});
}
功能切换显示（div）{
如果（div.style.display==“块”）{
div.style.display=“无”；
}否则{
div.style.display=“块”；
}
}
函数onContentLoaded（）{
var collapsibleDivs=document.queryselectoral（“.collapsible”）；
可折叠divs.forEach（div=>{
div.addEventListener（'click'，e=>{
var=e.src元素；
var sibling=clicked.nextElementSibling；
切换显示（同级）；
隐藏者（兄弟姐妹）；
})
})
}
document.addEventListener（“DOMContentLoaded”，onContentLoaded）；

---

请注意，我刚刚更改了您的JS脚本，并使用

document.querySelectorAll

获取给定类中的所有元素，

forEach

函数迭代元素，箭头函数提供回调，以及

e.srceelement

获取单击处理程序中单击的元素。希望对你有帮助。欢迎来到SO

非常感谢你！还有一个问题-我希望文本是动画，而不仅仅是弹出。我尝试将此添加到CSS:'.content{transition timening function:ease-in；transition:0.2s；}'但它不起作用，你知道我能做什么吗？Thanks@Linaelena动画的问题在于CSS

display

属性。因此，我编辑了我的答案以使用另一个属性（在本例中为

不透明度
），并向其添加了翻译。所以我希望这会对你有所帮助！它很有用，但在按钮之间留有空白。我看到了一个使用content.style.maxHeight=content.scrollHeight+px的示例；和content.style.maxHeight=null；在js和css中：'.content{max height:0；transition:max height 0.2s ease out；}'我可以用这样的东西代替不透明吗？我完全是初学者，仍然不太熟悉语法。@Linaelena是的，你可以，但是添加
overflow-y:hidden
，使可折叠文件完全折叠。看看我的答案！