Question

我想实现可扩展菜单。仅应扩展一个标题。当用户单击另一个时，以前的内容展开的标题应隐藏。我使用过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>

Answer 1

由JS完全打开即可折叠的on click：

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>

或者，要与height一起使用，您需要添加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>

Answer 2

一种更易读的方法是将代码划分为多个函数，如下所示：

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

注意，我刚刚更改了JS脚本，并使用document.querySelectorAll获取具有给定类的所有元素，使用forEach函数遍历元素，箭头函数提供回调，而e.srcElement提供单击处理程序上的clicked元素。希望对您有帮助。欢迎来到SO！

使用JavaScript展开/隐藏可折叠

2 个答案: