javascript - 如何更改自定义 Accordion 的图标？

Question

我们创建了一个自定义 Accordion 库，它将根据单击的内容切换 .content 元素，类似于 jQuery Accordion 。在 .header 元素旁边，我们显示 fontawesome plus icon 。我遇到的问题是内容会隐藏和显示，但图标不会切换。

如何切换内容元素和图标？

当前问题:

期望的输出:

$(function() {
    $('.header').on('click', function() {
      
      var hdr = $(this);
      var grandParents = hdr.parent().parent();
      grandParents.find('.item.active').removeClass('active');
      grandParents.find('.content').stop().slideUp().removeClass('active');
      hdr.closest('.item').find('.content').stop().slideToggle();
      hdr.parent().toggleClass('active');
      
    });
});

.content {
  display: none;
}

.item.active > .content {
  display: block;
}

.item.active > .header {
  color: white;
  background-color: black;
}

.header {
  padding: 16px;
  margin: 8px;
  background-color: lightgrey;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
<div class="accordion">
  <div class="item">
    <h3 class="header">
     <i class="fas fa-plus"></i>
     <span>First link</span>
    </h3>
  <div class='content'>  SOME CONTENT HERE </div>
  </div>
  <div class="item">
    <h3 class="header">
     <i class="fas fa-plus"></i>
     <span>second link</span>
    </h3>
  <div class='content'>  SOME CONTENT HERE </div>
  </div>
  
  <div class="item">
    <h3 class="header">
     <i class="fas fa-plus"></i>
     <span>third link</span>
    </h3>
  <div class='content'>  Some more content </div>
  </div>
  
  
</div>

Answer 1

我已经更新了你的js代码，请检查。我的更新的总体概念是，每次点击时，图标都会被删除并替换为新的但不同的图标(从加号到减号，反之亦然)。

问题在于使用了 fontawesome 图标。但无论如何，请看一下我的代码。

这是完整的工作代码。我唯一的更新是 js 部分。

$(function() {
    $('.header').on('click', function() {
      var hdr = $(this);
      
      hdr.siblings('.content').slideToggle();
      hdr.parent().toggleClass('active');
      hdr.parent().siblings().find('.content').slideUp();
      hdr.parent().siblings().removeClass('active');
      
      if(hdr.parent().hasClass('active')) {
        hdr.parent().find('svg').remove();
        hdr.parent().siblings().find('svg').remove();
        hdr.prepend('<i class="fas fa-minus"></i>');
        hdr.parent().siblings().find('.header').prepend('<i class="fas fa-plus"></i>');
      } else {
        hdr.parent().find('svg').remove();
        hdr.prepend('<i class="fas fa-plus"></i>');
      }
    });
});

.content {
  display: none;
}

.item.active > .content {
  display: block;
}

.item.active > .header {
  color: white;
  background-color: black;
}

.header {
  padding: 16px;
  margin: 8px;
  background-color: lightgrey;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
<div class="accordion">
  <div class="item">
    <h3 class="header">
     <i class="fas fa-plus"></i>
     <span>First link</span>
    </h3>
  <div class='content'>  SOME CONTENT HERE </div>
  </div>
  <div class="item">
    <h3 class="header">
     <i class="fas fa-plus"></i>
     <span>second link</span>
    </h3>
  <div class='content'>  SOME CONTENT HERE </div>
  </div>
  
  <div class="item">
    <h3 class="header">
     <i class="fas fa-plus"></i>
     <span>third link</span>
    </h3>
  <div class='content'>  Some more content </div>
  </div>
  
  
</div>