javascript - 使用js设计 Accordion 菜单，但只想一次只打开一个 Accordion 选项卡

Question

我使用 js 设计了 Accordion 菜单，但只想一次只打开一个 Accordion 选项卡。请提出任何所需的修改建议。我已经尝试了很多，但我没有得到它，如果有人对此有想法，请提出建议。

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";
    } 
  }
}

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

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');
}