展开和折叠手风琴时，图标没有相应地切换

Question

我有一架可伸缩的手风琴。 此手风琴还带有图标，以表示何时用+/-展开或折叠手风琴。 问题是，假设我先展开项目1，然后再展开项目2。项目1可以很好地折叠，但是图标仍为减号，但应该是加号，因为它已折叠。 所以问题在于，它没有被正确切换。 这是代码： https : //jsfiddle.net/y35rbzsd/

var coll = document.getElementsByClassName("accordion-toggle");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function(evnt) {

    const currClassList = evnt.target.classList;
    if (currClassList.contains('collapsed')) {
        evnt.target.classList.remove("collapsed");
        evnt.target.querySelector('.fa').classList.remove("fa-minus");
        evnt.target.querySelector('.fa').classList.add("fa-plus");
        var content = evnt.target.nextElementSibling;
        content.style.maxHeight = null;
    } else {
      for (var j = 0; j < coll.length; j++) {
           coll[j].classList.remove("collapsed")
           coll[j].nextElementSibling.style.maxHeight = null;
      }
      this.classList.toggle("collapsed");
              evnt.target.querySelector('.fa').classList.remove("fa-plus");
        evnt.target.querySelector('.fa').classList.add("fa-minus");
      var content = this.nextElementSibling;
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  });
}

Answer 1

您可以添加以下行：

coll[j].querySelector('.fa').classList.add("fa-plus");
coll[j].querySelector('.fa').classList.remove("fa-minus");

到以下部分：

for (var j = 0; j < coll.length; j++) {
  coll[j].classList.remove("collapsed")
  coll[j].nextElementSibling.style.maxHeight = null;
}

演示版

 var coll = document.getElementsByClassName("accordion-toggle"); for (var i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function(evnt) { const currClassList = evnt.target.classList; if (currClassList.contains('collapsed')) { evnt.target.classList.remove("collapsed"); evnt.target.querySelector('.fa').classList.remove("fa-minus"); evnt.target.querySelector('.fa').classList.add("fa-plus"); var content = evnt.target.nextElementSibling; content.style.maxHeight = null; } else { for (var j = 0; j < coll.length; j++) { coll[j].classList.remove("collapsed") coll[j].nextElementSibling.style.maxHeight = null; coll[j].querySelector('.fa').classList.add("fa-plus"); coll[j].querySelector('.fa').classList.remove("fa-minus"); } this.classList.toggle("collapsed"); evnt.target.querySelector('.fa').classList.remove("fa-plus"); evnt.target.querySelector('.fa').classList.add("fa-minus"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } } }); } 

 .accordion-toggle { background-color: #777; color: white; cursor: pointer; padding: 18px; width: calc(100% - 18px); border: none; text-align: left; outline: none; font-size: 15px; } .collapsed, .accordion-toggle:hover { background-color: #555; } .collapse { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; } .container { max-width: 100%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="container"> <h2 class="accordion-toggle">Open Collapsible<i class="fa fa-plus pull-right"></i></h2> <div id="anyId" class="collapse"> <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> <h2 class="accordion-toggle">Open Section 1<i class="fa fa-plus pull-right"></i></h2> <div class="collapse"> <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> </div> 

Answer 2

您是否尝试过使用Jquery缩短代码？

 $('.accordion-toggle').click(function(){ var temp = true; //get the current state // if($(this).children().hasClass('fa-minus')){ temp = true; }else{ temp = false; } //reset all // $('.collapse').css('max-height',0); $('.accordion-toggle > i').removeClass('fa-minus'); $('.accordion-toggle > i').addClass('fa-plus'); //config this // if(temp){ $(this).children().removeClass('fa-minus'); $(this).children().addClass('fa-plus'); $(this).next().css('max-height','0'); }else{ $(this).children().removeClass('fa-plus'); $(this).children().addClass('fa-minus'); $(this).next().css('max-height','6em'); } }); 

 .accordion-toggle { background-color: #777; color: white; cursor: pointer; padding: 18px; width: calc(100% - 18px); border: none; text-align: left; outline: none; font-size: 15px; } .collapsed, .accordion-toggle:hover { background-color: #555; } .collapse { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; } .container { max-width:100%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="container"> <h2 class="accordion-toggle">Open Collapsible<i class="fa fa-plus pull-right"></i></h2> <div id="anyId" class="collapse"> <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> <h2 class="accordion-toggle">Open Section 1<i class="fa fa-plus pull-right"></i></h2> <div class="collapse"> <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> </div>