Javascript 手风琴收尾

我有手风琴的代码：

JavaScript代码：

$(function() {

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

    for (i = 0; i < acc.length; i++) {

        acc[i].onclick = function() {

            for (j = 0; j < panels.length; j++) {

                panels[j].style.maxHeight = null;

                if (panels[j].previousElementSibling.classList.contains("active")) {
                    panels[j].previousElementSibling.classList.toggle("active");
                }
            }

            this.classList.toggle("active");

            var panel = this.nextElementSibling;

            if (panel.style.maxHeight) {
                //the code here is never executed
                panel.style.maxHeight = null;
            } else {
                panel.style.maxHeight = panel.scrollHeight + "px";
            }
        }
    }

});

Html代码：

<h5 class="accordion">Section 1</h5>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

第1节
同侧眼线

---

问题是if语句中标记的代码从未执行过，因此我可以通过单击另一个accordio div来关闭面板（没关系），但不能通过单击同一个按钮来关闭面板（实际上是打开的）accordion div.

您使用的

if

条件从来都不是

true

，因为您试图将

panel.style.maxHeight

用作一个布尔值，而该布尔值一开始就没有值

您可以通过将面板的

.css（'max-height'）

属性与

0px

（并将其设置回

0px

）进行比较来解决此问题，就像我在下面的代码段中所做的那样：

$（函数（）{
var acc=document.getElementsByClassName（“accordion”）；
var panels=document.getElementsByClassName（“panel”）；
var i；
var j；
对于（i=0；i
手风琴{
保证金：0；
字号：21px；
颜色：#384a5f；
光标：指针；
宽度：100%；
文本对齐：左对齐；
边界：无；
大纲：无；
过渡：0.4s；
边框底部：1px实心#dadfe2；
光标：指针；
大纲：无！重要；
填充：20px0；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.accordion.active、.accordion:悬停{
颜色：#9b9b9b；
}
分区小组{
背景色：#F8；
最大高度：0px；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}

第一节
同侧眼线

声明变量时使用

var

。

<h5 class="accordion">Section 1</h5>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>