使用js设计的折叠菜单，但希望一次只打开一个折叠选项卡
使用js设计的折叠菜单，但希望一次只打开一个折叠选项卡
提问于 2017-02-04 14:24:09
我是用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>
回答 2
Stack Overflow用户
发布于 2017-02-04 14:40:44
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');
}Stack Overflow用户
发布于 2017-02-04 14:40:24
document.getElementsByClassName可以与多个类一起使用。
因此，在打开手风琴之前，首先要查找已经用document.getElementsByClassName("active accordion")打开的手风琴。如果存在，请使用现有逻辑删除active类并折叠nextSibling。然后照常打开新的手风琴。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42037262
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号