javascript - Accordion 组如何修改代码

Question

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var active = document.querySelector(".accordion.active");
    if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}

var accd = document.getElementsByClassName("accordion-deep");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var active = document.querySelector(".accordion-deep.active");
    if (active && active != this) {
      active.classList.remove("active-deep");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active-depp");
    this.nextElementSibling.classList.toggle("show");
  }
}

<button class="accordion">Section 1</button>
<div id="foo" class="panel">
<button class="accordion-deep">Section 1</button>
<div id="foo" class="panel-deep">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>

我在线程中找到了这样的代码并且效果很好，但我需要将另一个 Accordion 放入第 1 部分。现在，当我这样做时，当我单击更深的 Accordion 面板时，第 1 部分正在关闭。我试图将另一个变量添加到更深的 Accordion 中，但这没有用。

CSS: toggle accordion panel?

Answer 1

由于您没有提供 css，我只能假设您是从另一个示例中复制的。我对您的代码进行了更改，现在可以使用了。

但在此之前，您的代码存在语法错误。如:

this.classList.toggle("active-depp");

应该是

this.classList.toggle("active-deep");

所有的acc 都应该是第二个函数的accd。但最重要的是，你必须为 accordion-deep 和 panel-deep 复制 css，例如

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var active = document.querySelector(".accordion.active");
    if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}

var accd = document.getElementsByClassName("accordion-deep");
var i;

for (i = 0; i < accd.length; i++) {
  accd[i].onclick = function() {
    var active = document.querySelector(".accordion-deep.active");
    if (active && active != this) {
      active.classList.remove("active-deep");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active-deep");
    this.nextElementSibling.classList.toggle("show");
  }
}

	button.accordion, button.accordion-deep {
	background-color:#CBF1F5;
	
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border:solid 1px #3CF;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
	font-weight:600;
}

button.accordion.active, button.accordion-deep.active, button.accordion:hover, button.accordion-deep:hover {
    background-color: #E1F7FB;
}

button.accordion:after, button.accordion-deep:after {
    content: '\25bc';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after, button.accordion-deep.active:after {
    content: "\25b2";
	color:#FFF;

}

.panel, .panel-deep {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

.panel.show, .panel-deep.show {
    opacity: 1;
    max-height: 500px;  
}

.panel.hide, .panel-deep.hide {
    opacity: 0;
    height: 0;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Section 1</button>
<div id="foo" class="panel">
<button class="accordion-deep">Section 1</button>
<div id="foo" class="panel-deep">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>

希望对您有所帮助。

EDIT : With this workaround, you can go one-level deep. But if you want to go deep, it is not an elegant way of writing code this way like copying each time you wanna go deep.