时间戳

首页 > 解决方案 > 如何在单击时使用 Javascript 折叠部分？

javascript - 如何在单击时使用 Javascript 折叠部分？

问题描述

我知道这个问题已被多次询问，并且我尝试了不同的方法，但这些方法不起作用。

我想要做的就是在单击按钮时折叠一个部分，但是我必须在它实际折叠之前单击按钮两次（In CollapseGrid被打印两次，然后它转到In Collapse）。

我们如何让它一次运行而无需单击两次？

function collapseGrid(element) {
  console.log("In CollapseGrid");
  element.addEventListener("click", collapse);

};

function collapse() {
  console.log("In Collapse");
  var content = this.nextElementSibling;
  if (content.style.display === "block") {
    content.style.display = "none";
  } else {
    content.style.display = "block";
  }
}
<button class="info" onClick="collapseGrid(this)">CLICK</button>
<div class="contnet">
  <p>This should be collapsed.</p>
</div>

标签： javascripthtml

解决方案

这是一种使用相当通用的功能和一些数据属性来实现它的简单方法。

var elements = document.querySelectorAll('[data-toggle="collapse"]');
elements.forEach(element => element.addEventListener('click', collapse));

function collapse() {
  var target = this.getAttribute('data-target');
  var element = document.getElementById(target);
  element.style.display = element.style.display == "none" ? "block" : "none";
}
<div>
  <button class="info" data-toggle="collapse" data-target="collapse1">CLICK 1</button>
  <div class="content" id="collapse1">
    <p>This should be collapsed.</p>
  </div>
</div>
<div>
  <button class="info" data-toggle="collapse" data-target="collapse2">CLICK 2</button>
  <div class="content" id="collapse2">
    <p>This should be collapsed.</p>
  </div>
</div>

推荐阅读