[英]How to close previous accordion when i click on next item in accordion?
我已經創建了手風琴，但是當我點擊 nect 手風琴時我想關閉以前的手風琴。 但是當我點擊下一個手風琴 previoes 手風琴沒有關閉我該如何解決這個問題？ 請幫我
> <!DOCTYPE html> <html> <head> <meta name="viewport"
> content="width=device-width, initial-scale=1"> <style> .accordion {
> background-color: #eee; color: #444; cursor: pointer; padding:
> 18px; width: 100%; border: none; text-align: left; outline:
> none; font-size: 15px; transition: 0.4s; }
>
> .active, .accordion:hover { background-color: #ccc; }
>
> .accordion:after { content: '\002B'; color: #777; font-weight:
> bold; float: right; margin-left: 5px; }
>
> .active:after { content: "\2212"; }
>
> .panel { padding: 0 18px; background-color: white; max-height:
> 0; overflow: hidden; transition: max-height 0.2s ease-out; }
> </style> </head> <body>
>
> <h2>Accordion with symbols</h2> <p>In this example we have added a
> "plus" sign to each button. When the user clicks on the button, the
> "plus" sign is replaced with a "minus" sign.</p> <button
> class="accordion">Section 1</button> <div class="panel"> <p>Lorem
> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
> veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
> ea commodo consequat.</p> </div>
>
> <button class="accordion">Section 2</button> <div class="panel">
> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
> eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
> minim veniam, quis nostrud exercitation ullamco laboris nisi ut
> aliquip ex ea commodo consequat.</p> </div>
>
> <button class="accordion">Section 3</button> <div class="panel">
> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
> eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
> minim veniam, quis nostrud exercitation ullamco laboris nisi ut
> aliquip ex ea commodo consequat.</p> </div>
>
> <script> var acc = document.getElementsByClassName("accordion"); var
> i;
>
> for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click",
> function() {
> this.classList.toggle("active");
> var panel = this.nextElementSibling;
> if (panel.style.maxHeight) {
> panel.style.maxHeight = null;
> } else {
> panel.style.maxHeight = panel.scrollHeight + "px";
> } }); } </script>
>
> </body> </html>
謝謝索馬塞卡
您需要檢查是否存在現有的active class 元素，並將其刪除。 否則，您只是切換您單擊的那個。
let acc = document.getElementsByClassName("accordion"); for (let i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { var panel = this.nextElementSibling; if(this.classList.contains('active')){ this.classList.remove("active"); panel.style.maxHeight = null; } else { if(document.querySelector('.accordion.active')){ document.querySelector('.accordion.active').nextElementSibling.style.maxHeight = null; document.querySelector('.accordion.active').classList.remove('active'); } this.classList.add("active"); panel.style.maxHeight = panel.scrollHeight + "px"; } }); }
.accordion{background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; }.active, .accordion:hover { background-color: #ccc; }.accordion:after { content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; }.active:after { content: "\2212"; }.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
<h2>Accordion with symbols</h2> <p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>
動態顯示手風琴，單擊時第一個手風琴打開和關閉上一個手風琴
[英]Display the accordion dynamically and the first accordion open and close previous accordion when click
Extjs手風琴項目如何點擊它時如何使一個打開的項目不再關閉
[英]Extjs accordion items how can i make an open item not to close again when clicking on it
JS - 單擊並打開另一個手風琴項時，如何關閉手風琴項？
[英]JS - How can I make an accordion item close when another has been clicked on and opened?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.