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

Answer 1

根据您当前的设置，您可以在标记中添加彼此相邻的 fa-plus 和 fa-minus 元素，然后添加以下 css 以隐藏/显示它们如果 collapsed class 存在：

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

Answer 2

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

像这样：

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

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

JavaScript to toggle icons on Accordion when they expand and collapse

javascript

css

jquery

razor

font-awesome