Question

＆＃13;

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");
  }
}

＆＃13;

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

＆＃13;

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

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>

希望它有所帮助。

编辑：通过这种解决方法，您可以深入一级。但是如果你想深入研究，那就不是一种优雅的编写代码的方式，就像你每次想要深入复制一样。

手风琴小组如何修改代码

1 个答案: