如何为Accordion手风琴菜单添加展开(+)与收起(-)图标

可以通过CSS伪元素结合类切换的方式实现，不需要额外添加HTML元素，步骤如下：

1. 调整HTML结构 #

给默认展开的第一个.question添加active类，对应它的.answer默认显示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

<div id="faq_slide">
  <div class="question active">First Question</div>
  <div class="answer">Lorem ipsum dolor sit amet.</div>
  <div class="question">Second Question</div>
  <div class="answer">Lorem ipsum dolor sit amet.</div>
  <div class="question">Third Question</div>
  <div class="answer">Lorem ipsum dolor sit amet.</div>
</div>

2. 更新CSS样式 #

利用::after伪元素生成图标，通过active类切换图标内容，同时调整布局让图标靠右：

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
body {
  font-family: "Inter", sans-serif;
  padding: 20px;
}

.question {
  color: #555;
  padding: 15px 40px 15px 15px; /* 右侧留空间放图标 */
  font-weight: 700;
  font-size: 16px;
  border: 1px solid #ccc;
  background: #efefef;
  position: relative; /* 让伪元素基于此定位 */
}

/* 默认显示+图标 */
.question::after {
  content: "+";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: bold;
}

/* 活跃状态显示-图标 */
.question.active::after {
  content: "-";
}

.question:hover {
  cursor: pointer;
}

.answer {
  color: #777;
  padding: 15px;
  font-weight: 400;
  font-size: 13px;
  border: 1px solid #ccc;
  border-top: none;
}

3. 修改JavaScript逻辑 #

点击时切换当前.question的active类，同时移除其他.question的active类：

$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question").click(function() {
  const $answer = $(this).next(".answer");
  const isVisible = $answer.is(":visible");
  
  if (isVisible) {
    $answer.slideUp(300);
    $(this).removeClass("active");
  } else {
    // 收起其他所有answer，移除它们的active类
    $("#faq_slide .answer").slideUp(300);
    $("#faq_slide .question").removeClass("active");
    
    // 展开当前answer，添加active类
    $answer.slideDown(300);
    $(this).addClass("active");
  }
});

内容的提问来源于stack exchange，提问作者phil