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

Answer 2

document.getElementsByClassName可用于多个类。

所以，在打开手风琴之前，首先要找一个已经打开um.meta_key的手风琴。如果存在，请使用现有逻辑删除document.getElementsByClassName("active accordion")类并折叠nextSibling。然后正常打开新的手风琴。

使用js设计的手风琴菜单，但希望一次只打开一个手风琴标签

2 个答案: