如何更改自定义手风琴的图标？

Question

我们创建了一个自定义手风琴库，该库将根据与jQuery手风琴类似的单击来切换.content元素。在.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代码，请检查。我的更新的一般概念是，每次单击都会删除图标，并用新的但不同的图标代替（从加号到减号，反之亦然）。

问题是使用字体惊人的图标。但是无论如何，请看一下我的代码。

这里是完整的工作代码。我唯一的更新是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>