JavaScript Accordion - 关闭

Question

我有 Accordion 的代码:

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

});

CSS 代码:

.accordion {
  margin: 0;
  font-size: 21px;
  color: #384a5f;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;

  border-bottom: 1px solid #dadfe2;
  cursor: pointer;
  outline: none !important;
  padding: 20px 0;


  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.accordion.active, .accordion:hover {
  color: #9b9b9b;
}

div.panel {
  background-color: #F8F8F8;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

HTML代码:

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

问题是 if 语句中标记的代码永远不会执行，所以我可以通过单击另一个 Accordion div 来关闭面板(没关系)但是我不能通过单击相同的(实际上是打开的) Accordion 来关闭它分区

Answer 1

您使用的 if 条件永远不会是 true 因为您正试图将 panel.style.maxHeight 用作 bool 值，它没有开始的值(value)。

您可以通过将面板的 .css('max-height') 属性与 0px 进行比较(并将其设置回 0px) 正如我在下面的代码片段中所做的那样:

$(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).css('max-height') != '0px')
                $(panel).css('max-height','0px');
            else
                $(panel).css('max-height',panel.scrollHeight + 'px');
        }
    }

});

.accordion {
   margin: 0;
   font-size: 21px;
   color: #384a5f;
   cursor: pointer;
   width: 100%;
   text-align: left;
   border: none;
   outline: none;
   transition: 0.4s;
   border-bottom: 1px solid #dadfe2;
   cursor: pointer;
   outline: none !important;
   padding: 20px 0;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.accordion.active, .accordion:hover {
   color: #9b9b9b;
}

div.panel {
   background-color: #F8F8F8;
   max-height: 0px;
   overflow: hidden;
   transition: max-height 0.2s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5 class="accordion">Section 1</h5>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>