JavaScript切换手风琴展开和折叠时的图标

Question

我有一个可展开和折叠的手风琴。以下是代码：https://jsfiddle.net/96jqo3ba/2/。我想使用FontAwesome图标类来表示手风琴选项卡展开和折叠时的状态。 这是我想要使用的两个FontAwesome类：

<i class="fas fa-plus" /i>
<i class="fas fa-minus" /i>

在cshtml中，我已经添加了<i class="fas fa-plus"/i>。我的问题是，在我的Jquery脚本中，当手风琴选项卡展开和折叠时，如何在<i class="fas fa-plus" /i> 和 <i class="fas fa-plus" /i>之间切换？

Jquery：

var coll = document.getElementsByClassName("accordion-toggle");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function(evnt) {
    const currClassList = evnt.currentTarget.classList;
    if (currClassList.contains('collapsed')) {
        evnt.currentTarget.classList.remove("collapsed");
        var content = evnt.currentTarget.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");
      var content = this.nextElementSibling;
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  });
}

- user11959553

Answer 1

根据您当前的设置，您可以在标记中将fa-plus和fa-minus元素放在一起，然后使用以下css根据collapsed类是否存在来隐藏/显示它们：

HTML：

<h2 class="accordion-toggle"><i class="fa fa-plus pull-right"></i><i class="fa fa-minus pull-right"></i><button>
Open Collapsible
</button></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"><i class="fa fa-plus pull-right"></i><i class="fa fa-minus pull-right"></i><button>
Open Section 1
</button></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>

CSS:

.accordion-toggle {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  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;
}

.fa-minus {
  display: none;
}

.collapsed .fa-minus {
  display: block;
}

.collapsed .fa-plus {
  display: none;
}

- Christopher Anderson

---

尽管这个解决方案可以工作，但在代码中有额外和不必要的元素是一个不好的实践。你其实不需要那里的2个图标元素。 - Bruno Monteiro

当然可以 - 但这是基于他们当前设置的工作解决方案。它允许CSS根据其现有功能控制图标逻辑。 - Christopher Anderson

也许我漏看了什么，但我不明白这个解决方案如何基于他们当前的设置。首先，当前设置是使用Javascript添加或删除CSS类，而您的解决方案是使用CSS来显示或隐藏元素。其次，当前设置只有一个图标元素，而您的解决方案则添加了一个额外的图标。再次强调，这是一个可能/可行的解决方案，但它会改变HTML结构并使用不良实践。只是一些反馈 :) - Bruno Monteiro

Answer 2

您可以使用与更改“collapse”类相同的方法。您只需要获取图标元素并根据需要添加或删除类。

像这样：

// Toggle icon
var iconElem = evnt.currentTarget.children[0];
iconElem.classList.remove("fa-minus");
iconElem.classList.add("fa-plus");

这意味着你的新JS将会是：

var coll = document.getElementsByClassName("accordion-toggle");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function(evnt) {
    const currClassList = evnt.currentTarget.classList;
    if (currClassList.contains('collapsed')) {
        evnt.currentTarget.classList.remove("collapsed");
        var content = evnt.currentTarget.nextElementSibling;
        content.style.maxHeight = null;

        // Toggle icon
        var iconElem = evnt.currentTarget.children[0];
        iconElem.classList.remove("fa-minus");
        iconElem.classList.add("fa-plus");
    } else {
      for (var j = 0; j < coll.length; j++) {
           coll[j].classList.remove("collapsed")
           coll[j].nextElementSibling.style.maxHeight = null;
           coll[j].children[0].classList.remove("fa-minus");
           coll[j].children[0].classList.add("fa-plus");
      }
      this.classList.toggle("collapsed");
      var content = this.nextElementSibling;
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
      // Toggle icon
      var iconElem = evnt.currentTarget.children[0];
      iconElem.classList.remove("fa-plus");
      iconElem.classList.add("fa-minus");
    }
  });
}

这里有一个可工作的 Fiddle 示例：https://jsfiddle.net/o6j49dcy/

- Bruno Monteiro

---

嗨@Bruno，我查看了你的Fiddle并注意到当折叠手风琴选项卡时，图标没有正确切换。例如，如果我展开手风琴1，然后展开手风琴2，手风琴1会被折叠，但图标仍然是减号。 - user11959553

糟糕，我的错@Cliff。我已经更新了答案和Fiddle中的代码。我错过了循环内部处理你提到的特定情况的代码。感谢您的反馈。 - Bruno Monteiro

谢谢@Bruno。我对你的方法有很好的理解。 - user11959553