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>