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

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

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

 .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 2

我总是发现制作自己的手风琴比较容易：

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

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

 <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> 

希望这可以帮助 ：）

Answer 3

改进了@MayK 的回答，以便可以关闭当前项目。

    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++) {
        if(acc[j] != this) {
           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";
          } 
        }
    
      });
    }