使用JavaScript展开/隐藏可折叠

我想实现可扩展菜单.仅应扩展一个标题.当用户单击另一个时,以前的内容
展开的标题应隐藏.我使用过w3schools的代码,但是我不知道如何自动隐藏以前的标题.

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

<h2>Collapsibles</h2>

          <p>A Collapsible:</p>
          <button class="collapsible">Open Collapsible</button>
          <div class="content">
            <p>text</p>
           </div>

      <p>Collapsible Set:</p>
      <button class="collapsible">Open Section 1</button>
      <div class="content">
        <p>text</p>
      </div>
      <button class="collapsible">Open Section 2</button>
      <div class="content">
        <p>text.</p>
      </div>
      <button class="collapsible">Open Section 3</button>
      <div class="content">
        <p>text</p>
      </div>

最佳答案

只需通过JS点击即可折叠即可折叠：

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

      for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click",function() {
          var content = this.nextElementSibling;
          if (this.classList.contains("active")) {
            content.style.opacity = 0;
          } else {
            if(node=document.querySelector(".collapsible.active")){
              node.classList.toggle("active",false);
              node.nextElementSibling.style.opacity = 0;
            }
            content.style.opacity = 1;
          }
          this.classList.toggle("active");
        });
      }

.content{
opacity:0;
transition:opacity 0.5s;
}

<h2>Collapsibles</h2>

          <p>A Collapsible:</p>
          <button class="collapsible">Open Collapsible</button>
          <div class="content">
            <p>text</p>
           </div>

      <p>Collapsible Set:</p>
      <button class="collapsible">Open Section 1</button>
      <div class="content">
        <p>text1</p>
      </div>
      <button class="collapsible">Open Section 2</button>
      <div class="content">
        <p>text2</p>
      </div>
      <button class="collapsible">Open Section 3</button>
      <div class="content">
        <p>text3</p>
      </div>

或者,要与高度配合使用,您需要添加overflow-y：hidden以完全隐藏它：

var coll = document.getElementsByClassName("collapsible");
      for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click",function() {
        console.trace()
        debugger
          var content = this.nextElementSibling;
          if (this.classList.contains("active")) {
            content.style.height = 0;
          } else {
            if(node=document.querySelector(".collapsible.active")){
              node.classList.toggle("active",false);
              node.nextElementSibling.style.height = 0;
            }
            content.style.height = content.scrollHeight+"px";
          }
          this.classList.toggle("active");
        });
      }

.content{
height:0;
transition:height 0.5s;
overflow-y:hidden;
}

<h2>Collapsibles</h2>

          <p>A Collapsible:</p>
          <button class="collapsible">Open Collapsible</button>
      <div class="content">
        <p>text1</p>
      </div>
      <p>Collapsible Set:</p>
      <button class="collapsible">Open Section 1</button>
      <div class="content">
        <p>text1</p>
      </div>
      <button class="collapsible">Open Section 2</button>
      <div class="content">
        <p>text2</p>
      </div>
      <button class="collapsible">Open Section 3</button>
      <div class="content">
        <p>text3</p>
      </div>

使用JavaScript展开/隐藏可折叠

猜你在找的HTML相关文章