时间戳

首页 > 解决方案 > 手风琴只打开一次然后出现故障

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

问题描述

谁能确定为什么我的手风琴没有无限点击和关闭，点击几下后出现故障？

当我在它自己的 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>

标签： javascriptcssaccordion

解决方案

发生这种情况是因为最初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>

推荐阅读