手风琴只打开一次然后出现故障

如何解决手风琴只打开一次然后出现故障

有人能找出为什么我的手风琴没有无限次点击和关闭并在几次点击后出现故障吗？

当我在自己的HTML / CSS / JS文件中尝试过此功能后，其他操作均无法正常进行。我不知道什么可能阻止这项工作。

我一直在努力解决这个问题，这让我发疯了。我无法确定问题出在哪里，欢迎任何建议！

  const acc = document.getElementsByClassName('accordion');
  let i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener('click',function () {
      this.classList.toggle('active');
      let panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = 0;
      } else {
        panel.style.maxHeight = panel.scrollHeight + 'px';
      }
    });
  }

@media only screen and (max-width: 767px) {
  .table-accordion {
    display: block !important;
  }

  .accordion {
    color: rgb(35,35,35);
    cursor: pointer;
    padding: 10px 3px;
    width: 100%;
    border: none;
    border-bottom: rgb(186,186,186) 1px solid;
    outline: none;
    font-size: 12px;
    text-align: left;
    transition: 0.4s;
    flex-wrap: wrap;
    background: none;
    font-family: inherit;
  }

  .accordion:focus {
    border: none;
  }

  .active,.accordion:hover {
    color: black;
  }

  .accordion:after {
    content: '\2715';
    transform: rotate(45deg);
    color: black;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    transition: 0.3s ease-in;
  }

  .active:after {
    content: '\2715';
    transform: rotate(90deg);
    transition: 0.3s ease-in;
  }

  .panel {
    margin: 0px;
    line-height: 2;
    padding: 0px 10px;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .panel a:hover {
    color: rgb(52,52,52);
    text-decoration: underline;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


 <div class="table-accordion">
      <button class="accordion">Shop and Learn</button>
      <div class="panel">
        <ul>
          <li><a href="#">Mac</a></li>
          <li><a href="#">iPad</a></li>
          <li><a href="#">iPhone</a></li>
          <li><a href="#">Watch</a></li>
          <li><a href="#">TV</a></li>
          <li><a href="#">Music</a></li>
          <li><a href="#">AirPods</a></li>
          <li><a href="#">HomePod</a></li>
          <li><a href="#">iPod Touch</a></li>
          <li><a href="#">Accessories</a></li>
          <li><a href="#">Gift Cards</a></li>
        </ul>
      </div>

      <button class="accordion">Services</button>
      <div class="panel">
        <ul>
          <li><a href="#">Apple Music</a></li>
          <li><a href="#">Apple News+</a></li>
          <li><a href="#">Apple TV+</a></li>
          <li><a href="#">Apple Arcade</a></li>
          <li><a href="#">Apple Books</a></li>
          <li><a href="#">iCloud</a></li>
        </ul>
      </div>

      <button class="accordion">Account</button>
      <div class="panel">
        <ul>
          <li><a href="#">Manage Your Apple ID</a></li>
          <li><a href="#">Apple Store Account</a></li>
          <li><a href="#">iCloud.com</a></li>
        </ul>
      </div>
      <button class="accordion">Apple Store</button>
      <div class="panel">
        <ul>
          <li><a href="#">Find a Store</a></li>
          <li><a href="#">Shop Online</a></li>
          <li><a href="#">Genius Bar</a></li>
          <li><a href="#">Today at Apple</a></li>
          <li><a href="#">Apple Summer Camp</a></li>
          <li><a href="#">Apple Store App</a></li>
          <li><a href="#">Refurbished and Clearance</a></li>
          <li><a href="#">Financing</a></li>
          <li><a href="#">Apple Trade In</a></li>
          <li><a href="#">Order Status</a></li>
          <li><a href="#">Shopping Help</a></li>
        </ul>
      </div>
      <button class="accordion">For Business</button>
      <div class="panel">
        <ul>
          <li><a href="#">Apple and Business</a></li>
          <li><a href="#">Shop for Business</a></li>
        </ul>
      </div>
      <button class="accordion">For Education</button>
      <div class="panel">
        <ul>
          <li><a href="#">Apple and Education</a></li>
          <li><a href="#">Shop for University</a></li>
        </ul>
      </div>
      <button class="accordion">For Healthcare</button>
      <div class="panel">
        <ul>
          <li><a href="#">Apple in Healthcare</a></li>
          <li><a href="#">Health on Apple Watch</a></li>
        </ul>
      </div>
      <button class="accordion">Apple Values</button>
      <div class="panel">
        <ul>
          <li><a href="#">Accessibility</a></li>
          <li><a href="#">Environment</a></li>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">supplier Responsibility</a></li>
        </ul>
      </div>
      <button class="accordion">About Apple</button>
      <div class="panel">
        <ul>
          <li><a href="#">Newsroom</a></li>
          <li><a href="#">Apple leadership</a></li>
          <li><a href="#">Job Opportunities</a></li>
          <li><a href="#">Warranty</a></li>
          <li><a href="#">Investors</a></li>
          <li><a href="#">Events</a></li>
          <li><a href="#">European Job Creation</a></li>
          <li><a href="#">Contact Apple</a></li>
        </ul>
      </div>
    </div>

解决方法

之所以会这样，是因为最初style.maxHeight的值为null，所以当我们第一次在if内部对其进行检查时，它将返回false，但是将其设置为“ 0” “实际上是字符串0px而不是int的字符串，这会使条件在下一次检查中成立。

只需添加另一个条件panel.style.maxHeight!="0px"，它就会按预期运行。

const acc = document.getElementsByClassName('accordion');
  let i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener('click',function () {
      this.classList.toggle('active');
      let panel = this.nextElementSibling;
      
      // Change
      if (panel.style.maxHeight && panel.style.maxHeight!="0px") {
      // End of change
        panel.style.maxHeight = 0;
      } else {
        panel.style.maxHeight = panel.scrollHeight + 'px';
      }
    });
  }

@media only screen and (max-width: 767px) {
  .table-accordion {
    display: block !important;
  }

  .accordion {
    color: rgb(35,35,35);
    cursor: pointer;
    padding: 10px 3px;
    width: 100%;
    border: none;
    border-bottom: rgb(186,186,186) 1px solid;
    outline: none;
    font-size: 12px;
    text-align: left;
    transition: 0.4s;
    flex-wrap: wrap;
    background: none;
    font-family: inherit;
  }

  .accordion:focus {
    border: none;
  }

  .active,.accordion:hover {
    color: black;
  }

  .accordion:after {
    content: '\2715';
    transform: rotate(45deg);
    color: black;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    transition: 0.3s ease-in;
  }

  .active:after {
    content: '\2715';
    transform: rotate(90deg);
    transition: 0.3s ease-in;
  }

  .panel {
    margin: 0px;
    line-height: 2;
    padding: 0px 10px;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .panel a:hover {
    color: rgb(52,52,52);
    text-decoration: underline;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


 <div class="table-accordion">
      <button class="accordion">Shop and Learn</button>
      <div class="panel">
        <ul>
          <li><a href="#">Mac</a></li>
          <li><a href="#">iPad</a></li>
          <li><a href="#">iPhone</a></li>
          <li><a href="#">Watch</a></li>
          <li><a href="#">TV</a></li>
          <li><a href="#">Music</a></li>
          <li><a href="#">AirPods</a></li>
          <li><a href="#">HomePod</a></li>
          <li><a href="#">iPod Touch</a></li>
          <li><a href="#">Accessories</a></li>
          <li><a href="#">Gift Cards</a></li>
        </ul>
      </div>

      <button class="accordion">Services</button>
      <div class="panel">
        <ul>
          <li><a href="#">Apple Music</a></li>
          <li><a href="#">Apple News+</a></li>
          <li><a href="#">Apple TV+</a></li>
          <li><a href="#">Apple Arcade</a></li>
          <li><a href="#">Apple Books</a></li>
          <li><a href="#">iCloud</a></li>
        </ul>
      </div>

      <button class="accordion">Account</button>
      <div class="panel">
        <ul>
          <li><a href="#">Manage Your Apple ID</a></li>
          <li><a href="#">Apple Store Account</a></li>
          <li><a href="#">iCloud.com</a></li>
        </ul>
      </div>
      <button class="accordion">Apple Store</button>
      <div class="panel">
        <ul>
          <li><a href="#">Find a Store</a></li>
          <li><a href="#">Shop Online</a></li>
          <li><a href="#">Genius Bar</a></li>
          <li><a href="#">Today at Apple</a></li>
          <li><a href="#">Apple Summer Camp</a></li>
          <li><a href="#">Apple Store App</a></li>
          <li><a href="#">Refurbished and Clearance</a></li>
          <li><a href="#">Financing</a></li>
          <li><a href="#">Apple Trade In</a></li>
          <li><a href="#">Order Status</a></li>
          <li><a href="#">Shopping Help</a></li>
        </ul>
      </div>
      <button class="accordion">For Business</button>
      <div class="panel">
        <ul>
          <li><a href="#">Apple and Business</a></li>
          <li><a href="#">Shop for Business</a></li>
        </ul>
      </div>
      <button class="accordion">For Education</button>
      <div class="panel">
        <ul>
          <li><a href="#">Apple and Education</a></li>
          <li><a href="#">Shop for University</a></li>
        </ul>
      </div>
      <button class="accordion">For Healthcare</button>
      <div class="panel">
        <ul>
          <li><a href="#">Apple in Healthcare</a></li>
          <li><a href="#">Health on Apple Watch</a></li>
        </ul>
      </div>
      <button class="accordion">Apple Values</button>
      <div class="panel">
        <ul>
          <li><a href="#">Accessibility</a></li>
          <li><a href="#">Environment</a></li>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Supplier Responsibility</a></li>
        </ul>
      </div>
      <button class="accordion">About Apple</button>
      <div class="panel">
        <ul>
          <li><a href="#">Newsroom</a></li>
          <li><a href="#">Apple Leadership</a></li>
          <li><a href="#">Job Opportunities</a></li>
          <li><a href="#">Warranty</a></li>
          <li><a href="#">Investors</a></li>
          <li><a href="#">Events</a></li>
          <li><a href="#">European Job Creation</a></li>
          <li><a href="#">Contact Apple</a></li>
        </ul>
      </div>
    </div>