javascript - 使用纯 javascript 的手风琴 - 仅适用于双击

Question

我想通过使用手风琴方法扩展 onclick 事件（纯 javascript）上的 div，因为它具有多个级别，但它仅适用于双击。我希望它能够正常运行，而不是 javascript onload。

提前感谢您提供的任何帮助！

function togglediv(){
	let acc = document.getElementsByClassName("accordion");
	for (var i = 0; i < acc.length; i++) {
		acc[i].addEventListener("click", function() {
			this.classList.toggle("active");
			let panel=this.nextElementSibling;
			if(panel!==null){
				if (panel.style.display==="block") {
					panel.style.display="none";
				} else {
					panel.style.display="block";
				}
			}
			return false;
		});
	}
}

.accordion, .subpanel-accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  display:flex;
}

.panelaccordion {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<div class="accordion" id="main-1" onclick="togglediv();">Level 1</div>
<div class="panelaccordion level2">
	<div class="accordion" id="sub-1" onclick="togglediv();">
		<div class="text-accordion">Level 2</div>
		<div class="button-accordion" onclick="getid('sub-1');">Click level 2</div>
	</div>
	<div class="subpanel-accordion" id="subpanel-1">
		<div class="text-accordion">Level 3</div>
		<div class="button-accordion" onclick="getidsub('subpanel-1');">Click level 3</div>
	</div>
	<div class="accordion" id="sub-2" onclick="togglediv();">
		<div class="text-accordion">Level 2(2)</div>
		<div class="button-accordion" onclick="getid('sub-2');">Click level 2(2)</div>
	</div>
</div>  

标签： javascript

Answer 1

您不需要，onclick="togglediv()因为您已经添加了事件侦听器，因此您可以简单地删除togglediv()并添加事件侦听器，如下所示：

let acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    let panel = this.nextElementSibling;
    if (panel !== null) {
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    }
    return false;
  });
}

.accordion,
.subpanel-accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  display: flex;
}

.panelaccordion {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<div class="accordion" id="main-1">Level 1</div>
<div class="panelaccordion level2">
  <div class="accordion" id="sub-1">
    <div class="text-accordion">Level 2</div>
    <div class="button-accordion" onclick="getid('sub-1');">
      Click level 2
    </div>
  </div>
  <div class="subpanel-accordion" id="subpanel-1">
    <div class="text-accordion">Level 3</div>
    <div class="button-accordion" onclick="getidsub('subpanel-1');">
      Click level 3
    </div>
  </div>
  <div class="accordion" id="sub-2">
    <div class="text-accordion">Level 2(2)</div>
    <div class="button-accordion" onclick="getid('sub-2');">
      Click level 2(2)
    </div>
  </div>
</div>