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

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>