javascript - 展开和折叠 Accordion 时，图标不会相应地切换

Question

我有一个可以展开和折叠的 Accordion 。这个 Accordion 也有图标来表示何时用 +/- 展开或折叠 Accordion 。 问题是，如果我展开第 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>