Question

我有手风琴的代码：

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语句中标记的代码永远不会被执行所以我可以通过点击另一个手风琴div来关闭面板（没关系）但我不能通过点击同一个（实际上是oppened）手风琴来关闭它格。

Answer 1

您正在使用的if条件永远不会是true，因为您正在尝试将panel.style.maxHeight用作没有值开头的布尔值。

您可以通过将面板的.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>

JavaScript手风琴 - 关闭

1 个答案: