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

Question

任何人都可以确定为什么我的手风琴没有无限点击和关闭并且在点击几下后出现故障？

当我在它自己的 HTML/CSS/JS 文件中尝试这个时，没有其他任何事情发生，它完美地工作。 我不知道什么可能会阻止这项工作。

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

 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>

Answer 1

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