我做了一个手风琴，但是我想让我的加号图标平滑地转换成减号图标，怎么用jQuery实现呢？

要实现手风琴效果，并且在展开时将加号图标平滑转换为减号图标，你可以使用jQuery来操作DOM元素的类和样式。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手风琴效果</title>
<style>
  .accordion {
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
  }
  .accordion-item {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    cursor: pointer;
  }
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .accordion-content.active {
    max-height: 500px; /* 根据内容调整 */
  }
  .icon {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
  }
  .icon.active {
    transform: rotate(45deg);
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      <h3>标题1</h3>
      <span class="icon">+</span>
    </div>
    <div class="accordion-content">
      内容1...
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      <h3>标题2</h3>
      <span class="icon">+</span>
    </div>
    <div class="accordion-content">
      内容2...
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  $('.accordion-header').click(function() {
    var content = $(this).next('.accordion-content');
    var icon = $(this).find('.icon');

    if (content.hasClass('active')) {
      content.removeClass('active');
      icon.removeClass('active');
    } else {
      $('.accordion-content').removeClass('active');
      $('.icon').removeClass('active');
      content.addClass('active');
      icon.addClass('active');
    }
  });
});
</script>

</body>
</html>

解释

HTML结构：
- accordion：手风琴容器。
- accordion-item：每个手风琴项。
- accordion-header：手风琴项的标题部分，包含加号图标。
- accordion-content：手风琴项的内容部分。

CSS样式：
- accordion-content：默认情况下，内容部分的最大高度为0，隐藏内容。
- active类：当内容展开时，添加active类，设置最大高度，使内容显示。
- icon：图标默认旋转角度为0度。
- icon.active：当图标需要转换为减号时，添加active类，旋转45度。
jQuery脚本：
- 当点击accordion-header时，检查内容部分是否已经有active类。
- 如果有，则移除active类，隐藏内容，并将图标旋转回0度。
- 如果没有，则移除所有内容部分的active类，隐藏所有内容，然后将当前点击的内容部分添加active类，显示内容，并将图标旋转45度。