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

Question

我们创建了一个自定义手风琴库，它将根据单击的内容切换 .content 元素，类似于 jQuery 手风琴。在 .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>

Answer 2

我们有同样的要求，我们必须用特定于手风琴内容的动态图标替换每个手风琴项目的 + 图标，例如第一手风琴 - a.png 第二个手风琴 - b.png 依此类推。

我通过将图像添加到 Accordion Item 页面内容模板并将其分配给克隆的 accordion 渲染来做到这一点。

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

How to change icon for a custom accordion?

html

javascript

jquery

accordion