javascript - 如何在打开另一个 Accordion 文本之前关闭 Accordion 元素

Question

实际上我已经使用 Bootstrap 类实现了 Accordion 它在我们单击“更多信息”时工作正常。但是如果我单击“下一个 Accordion 文本”，第一个应该自动关闭。任何人都可以帮助我吗。提前致谢。

HTML:

<div class="accordion" >More Info</div>
                    <div class="panel">
        <p>            
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        </p>
        </div>
        <div class="accordion" >More Info</div>
                    <div class="panel">
        <p>            
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        </p>
        </div>

CSS:

div.panel {
padding: 0 18px;
display: none;
background-color: white;
border: 1px solid #d4d4d4;
 }

     div.panel.show {
display: block;
color: #2b3034;
font-size: 12px;
font-family: Roboto,sans-serif;
margin-left: -18px;
border-radius: 0px;
width: 778px;
margin-top: 16px;
background: #ffffff;
margin-bottom: -17px;
              }

Javascript:

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
 }
 }

JSFiddle

Answer 1

因为您已经标记了 Jquery 标签。只需添加 $(".panel").removeClass("show");

for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function(){

            $(".panel").removeClass("show");
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("show");
      }
    }

Working Demo