来自W3C的手风琴 - 我如何一次打开一个面板？

Question

我有手风琴，我想一次只打开一个面板。 当用户单击以打开关闭的面板时，我需要一些帮助才能关闭任何打开的面板。我想这需要一些javascript - 我担心我不确定如何实现它... 我将拥有比示例中显示的更多的面板

我有以下代码：

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

.accordion {
    background-color: #EA3F8A;
    color: #FFF;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #C11561;
}

.accordion:after {
    content: '\002B';
    color: #FFF;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#accord {
    margin-bottom: 5.5em;
}

<button class="accordion">Section 1</button>
    <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    
    <button class="accordion">Section 2</button>
    <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <button class="accordion">Section 2</button>
    <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

Answer 1

在打开被点击的手风琴之前，您需要关闭其他手风琴。

＆＃13;

＆＃13;

var acc = document.getElementsByClassName("accordion");
var i, j;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    for (j = 0; j < acc.length; j++) {
      acc[j].classList.remove("active");
      acc[j].nextElementSibling.style.maxHeight = null;
    }
    if (!this.classList.contains("active")){
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      } 
    }

  });
}

＆＃13;

.accordion {
    background-color: #EA3F8A;
    color: #FFF;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #C11561;
}

.accordion:after {
    content: '\002B';
    color: #FFF;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#accord {
    margin-bottom: 5.5em;
}

＆＃13;

<button class="accordion">Section 1</button>
    <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    
    <button class="accordion">Section 2</button>
    <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <button class="accordion">Section 2</button>
    <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我总是觉得制作自己的手风琴更容易：

＆＃13;

＆＃13;

$('.item-title').click(function() {
        $(this).parents().siblings().find('.item-body').slideUp();
        $(this).parents().siblings('.item').find('.item-open-close').removeClass('fa-minus').addClass('fa-plus');
        $(this).find('i').toggleClass('fa-minus fa-plus');
        $(this).siblings('.item-body').slideToggle();
    });

＆＃13;

.item-title i {
float:right;
}

.item-title {
    background-color: #EA3F8A;
    color: #FFF;
    cursor: pointer;
    padding: 18px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
.item-body {
padding:18px;
}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="accordion">            
  <div class="item">
    <div class="item-title">
      Section 1<i class="fa item-open-close fa-plus"></i>
    </div>
    <div class="item-body" style="display: none;">
      This is content. This is content. This is content. This is content. This is content. This is content. This is content.   
    </div>  
  </div>
  <div class="item">
    <div class="item-title">
      Section 2<i class="fa item-open-close fa-plus"></i>
    </div>
    <div class="item-body" style="display: none;">
      This is content. This is content. This is content. This is content. This is content. This is content. This is content.   
    </div>  
  </div>
  <div class="item">
    <div class="item-title">
      Section 3<i class="fa item-open-close fa-plus"></i>
    </div>
    <div class="item-body" style="display: none;">
      This is content. This is content. This is content. This is content. This is content. This is content. This is content.   
    </div>  
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助:)