W3手風琴 - 自動關閉部分並打開/關閉全部

Question

在Google上搜索時，我只是發現了替代手風琴，其中包含不必要的長html和css代碼，這就是我爲什麼要使用這一手風琴的原因。

JS：

var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function() { 
    this.classList.toggle("active"); 
    var panel = this.nextElementSibling; 
    if (panel.style.maxHeight){ 
     panel.style.maxHeight = null; 
    } else { 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
    } 
    } 
} 

Fiddle

1. 我怎樣才能讓另一打開時，部分自動關閉？如果第1部分已打開，並且單擊第3部分，則第1部分應關閉。所有部分都像現在一樣在頁面加載時關閉，並且隨時只打開一個部分。

2. 有什麼辦法可以創建一個「全部打開」和一個「關閉所有」部分按鈕/鏈接？

Answer 1

我寫了全部打開並關閉所有函數，並通過循環遍歷元素並打開和關閉它們。

爲了在打開其他部分時關閉其他部分，我只需在打開所選部分之前運行closeAll()。

編輯在條件下包裝closeAll()，以便可以通過點擊關閉活動部分。

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 

 
\t if(!this.classList.contains('active')){ 
 
    \t closeAll(); 
 
    } 
 
\t 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
} 
 

 
function openAll(){ 
 
    for (i = 0; i < acc.length; i++) { 
 
    \t acc[i].classList.add("active"); 
 
     acc[i].nextElementSibling.style.maxHeight = acc[i].nextElementSibling.scrollHeight + "px"; 
 
    } 
 
} 
 

 
function closeAll(){ 
 
\t for (i = 0; i < acc.length; i++) { 
 
    \t acc[i].classList.remove("active"); 
 
     acc[i].nextElementSibling.style.maxHeight = null; 
 
    } 
 
} 
 

 
document.getElementById('openAll').addEventListener('click', openAll); 
 
document.getElementById('closeAll').addEventListener('click', closeAll);

button.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; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    background-color: #ddd; 
 
} 
 

 
button.accordion:after { 
 
    content: '\002B'; 
 
    color: #777; 
 
    font-weight: bold; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2212"; 
 
} 
 

 
div.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 id="openAll">Open All</button> 
 
<button id="closeAll">Close All</button> 
 
<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>