我已經創建了手風琴，但是當我點擊 nect 手風琴時，我想關閉以前的手風琴。但是當我點擊下一個手風琴前手風琴時，手風琴沒有關閉我該如何解決這個問題？請幫我
> <!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
> >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>
謝謝 Somasekhar
uj5u.com熱心網友回復：
您需要檢查是否存在現有的active類元素，并將其洗掉。否則你只是切換你點擊的那個。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381194.html
標籤：javascript html 查询 css
上一篇：SwiftUI：在用戶使用DocumentPicker選擇檔案后顯示Array中的檔案url
下一篇：HTML/CSS行距