SlideToggle 一次仅打开一个容器 Vanilla JS

Question

也许有人知道如何一次只打开一个容器？现在在这个例子中你可以打开所有三个吗？我只想打开一个，打开时将文本更改为“关闭”。有什么想法吗？

以下是 codepen 代码的链接：code https://codepen。 io/jorgemaiden/pen/YgGZMg

我将非常感谢任何帮助和提示！

Answer 1

您可以通过多种方式做到这一点，但根据您的参考，我只需添加循环遍历不是您单击的元素的元素的函数，然后删除活动类（如果存在）

var linkToggle = document.querySelectorAll(".js-toggle");

for (i = 0; i < linkToggle.length; i++) {
  linkToggle[i].addEventListener("click", function(event) {
    event.preventDefault();

    var container = document.getElementById(this.dataset.container);
    this.innerText = "Close";
    toggleSlide(container);
  });
}

function toggleSlide(container) {
  for (i = 0; i < linkToggle.length; i++) {
    let el = document.getElementById(linkToggle[i].dataset.container);
    if (el != container && el.classList.contains("active")) {
      el.style.height = "0px";
      linkToggle[i].innerText = "Click";
      el.addEventListener(
        "transitionend",
        function() {
          el.classList.remove("active");
        }, {
          once: true
        }
      );
    }
  }
  if (!container.classList.contains("active")) {
    container.classList.add("active");
    container.style.height = "auto";

    var height = container.clientHeight + "px";

    container.style.height = "0px";

    setTimeout(function() {
      container.style.height = height;
    }, 0);
  } else {
    container.style.height = "0px";

    container.addEventListener(
      "transitionend",
      function() {
        container.classList.remove("active");
      }, {
        once: true
      }
    );
  }
}

.box {
  width: 300px;
  border: 1px solid #000;
  margin: 10px;
  cursor: pointer;
}

.toggle-container {
  transition: height 0.35s ease-in-out;
  overflow: hidden;
}

.toggle-container:not(.active) {
  display: none;
}

<div class="box">
  <div class="js-toggle" data-container="toggle-1">Click</div>
  <div class="toggle-container" id="toggle-1">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
  </div>
</div>

<div class="box">
  <div class="js-toggle active" data-container="toggle-2">Click</div>
  <div class="toggle-container open" id="toggle-2">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
  </div>
</div>

<div class="box">
  <div class="js-toggle" data-container="toggle-3">Click</div>
  <div class="toggle-container" id="toggle-3">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
  </div>
</div>