使用js设计的手风琴菜单，但一次只能打开一个手风琴选项卡

Question

我使用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){ 
 
    \t 
 
    \t panel.style.maxHeight = null; 
 
    } else { 
 
    \t panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
}

button.accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    height:45px; 
 
    border: solid 2px; 
 
    border-color: #E5E7E9; 
 
    text-align: left; 
 
    padding:0 16px ; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
    border-radius:10px; 
 
    margin: 4px; 
 
    
 
} 
 

 
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.panel1 { 
 
    padding: 0 20px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
    border-radius:5px; 
 
}

<div class="container" style="position:relative; margin-top:70px;margin-bottom:70px;" > 
 
<div class="well" style="border-radius:8px;box-shadow:0 0 7px #999 background-color: #fafafa;"> 
 

 
<h2>Our Services</h2> 
 

 
<button class="accordion"><span class="glyphicon glyphicon-phone" ></span> Mobile Recharge</button> 
 
<div class="panel1"> 
 
    <p> 
 
<div class="scroll_table" id="style-2"> 
 
    <table class="table" > 
 
    <tbody> 
 
      <tr><td>BSNL</td></tr> 
 
      <tr><td>Idea</td></tr> 
 
      <tr><td>Vodaphone</td></tr> 
 
      <tr><td>Reliance</td></tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
</p> 
 
</div> 
 

 
<button class="accordion"><span class="glyphicon glyphicon-earphone" ></span> Postpaid Bills</button> 
 
<div class="panel1"> 
 
    <p><div class="scroll_table" id="style-2"> 
 
    <table class="table" > 
 
    <tbody> 
 
      <tr><td>BSNL</td></tr> 
 
      <tr><td>Idea</td></tr> 
 
      <tr><td>Vodaphone</td></tr> 
 
      <tr><td>Reliance</td></tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
</p> 
 
</div> 
 
<button class="accordion"><span class="glyphicon glyphicon-phone-alt" ></span> Landline Bills</button> 
 
<div class="panel1"> 
 
    <p><div class="scroll_table" id="style-2"> 
 
    <table class="table" > 
 
    <tbody> 
 
      <tr><td>Airtel Landline and Broadband</td></tr> 
 
      <tr><td>BSNL Landline and Broadband</td></tr> 
 
      <tr><td>MTNL Delhi</td></tr> 
 
      
 
    </tbody> 
 
    </table> 
 
</div> 
 
    
 
    </p> 
 
</div> 
 

 

 

 
<button class="accordion"><span class="glyphicon glyphicon-list" ></span>  Dth</button> 
 
<div class="panel1"> 
 
    <p> 
 
    <div class="scroll_table" id="style-2"> 
 
    <table class="table" > 
 
    <tbody> 
 
      <tr><td>Tata Sky</td></tr> 
 
      <tr><td>Dish TV</td></tr> 
 
      <tr><td>Sun Direct</td></tr> 
 
      <tr><td>Reliance Digital</td></tr> 
 
      
 
    </tbody> 
 
    </table> 
 
</div> 
 
    
 
    </p> 
 
</div> 
 
<button class="accordion"><span class="glyphicon glyphicon-credit-card" ></span> Datacard</button> 
 
<div class="panel1"> 
 
    <p> 
 
    <div class="scroll_table" id="style-2"> 
 
    <table class="table" > 
 
    <tbody> 
 
      <tr><td>Active</td></tr> 
 
      <tr><td>Active</td></tr> 
 
      <tr><td>Active</td></tr> 
 
      <tr><td>Active</td></tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
    
 
    </p> 
 
</div> 
 
<button class="accordion"><span class="glyphicon glyphicon-flash" ></span> Electricity</button> 
 
<div class="panel1"> 
 
    <p> 
 
    <div class="scroll_table" id="style-2"> 
 
    <table class="table" > 
 
    <tbody> 
 
      <tr><td>Marashtra Electricity Board</td></tr> 
 
      <tr><td>BSES Rajbhani Power-DELHI</td></tr> 
 
      <tr><td>BSES Yamuna Power-DELHI</td></tr> 
 
      <tr><td>MSEB Mumbai</td></tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
    </p> 
 
</div> 
 
<button class="accordion"><span class="glyphicon glyphicon-fire" ></span> Gas Bill</button> 
 
<div class="panel1"> 
 
    <p> 
 
    <div class="scroll_table" id="style-2"> 
 
    <table class="table" > 
 
    <tbody> 
 
      <tr><td>Mahanagar Gas</td></tr> 
 
      <tr><td>Active</td></tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
    
 
    </p> 
 
</div> 
 

 
<button class="accordion"><span class="glyphicon glyphicon-tint" ></span> Water Bill</button> 
 
<div class="panel1"> 
 
    <p> 
 
    <div class="scroll_table" id="style-2"> 
 
    <table class="table" > 
 
    <tbody> 
 
      <tr><td>All Companies</td></tr> 
 
      <tr><td>Active</td></tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
    
 
    </p> 
 
</div> 
 
</div> 
 
</div>

Answer 1

document.getElementsByClassName可以与多个类使用。

因此，在打开手风琴之前，先查找一个已经打开的号码为document.getElementsByClassName("active accordion")。如果存在，使用您现有的逻辑删除active类并折叠下一个同级。然后照常开启新的手风琴。

Answer 2

Element.classList.toggle在Internet Explorer中不起作用，但无论如何，您都不会将其用于您想要的操作。

（ES5）

// reference array of elements with class "accordion" 
var accArr = document.getElementsByClassName("accordion"); 
// add event listener to all "accordion" elements to call "clickHandler" 
accArr.forEach(function(elem){ 
    elem.addEventListener('click', clickHandler) 
}) 

function clickHandler(e){ 
    // if element has class "active" remove class 
    if(e.classList.contains('active'){ 
     e.classList.remove('active') 
    // else remove "active" from current "active" elements and add class "active" to the last clicked "accordion" element 
    } else { 
     removeActive(); 
     e.classList.add('active') 
    } 
} 

function removeActive(){ 
    var activeElement = document.getElementsByClassName('accordion active')[0]; 
    activeElement.classList.remove('active'); 
}