jQuery slideToggle实现标题后加减号图标切换功能问题

我来帮你搞定这个问题！你之前的代码只处理了标题文本的替换，但没针对+/-符号做切换逻辑，而且没有借助类状态来联动样式，所以没法实现图标切换效果。这里有两种实用的解决方案：

方法一：用额外元素单独控制符号（直观易理解） #

这种方法是在标题里新增一个元素专门放+/-符号，点击时直接修改这个元素的文本内容。

修改后的HTML #

<div class="header">
  <span class="title">TITLE</span>
  <span class="toggle-icon">+</span>
</div>
<div class="content">
  <p>Expanded text</p>
</div>

调整后的jQuery代码 #

$(window).load(function(){ 
  $(".header").click(function () { 
    const $header = $(this); 
    const $content = $header.next(); 
    const $toggleIcon = $header.find('.toggle-icon'); // 获取符号元素
    
    $content.slideToggle(500, function () { 
      // 根据内容是否可见切换符号
      $toggleIcon.text($content.is(":visible") ? "-" : "+");
    }); 
  }); 
}); 

优化的CSS（让符号对齐更美观） #

.header { 
  background-color: #dc0032; 
  padding: 20px; 
  cursor: pointer; 
  color: #fff; 
  display: flex;
  justify-content: space-between; /* 标题和符号左右分开 */
  align-items: center; /* 垂直居中对齐 */
}
.toggle-icon {
  font-size: 1.2em;
  font-weight: bold;
}

方法二：用CSS伪元素+类切换（样式与逻辑分离） #

这种方法通过给.header添加/移除类，配合CSS伪元素来显示不同符号，更符合前端开发的语义化和可维护性原则。

保持原有HTML结构 #

<div class="header">
  <span>TITLE</span>
</div>
<div class="content">
  <p>Expanded text</p>
</div>

新增类控制的CSS #

.header { 
  background-color: #dc0032; 
  padding: 20px; 
  cursor: pointer; 
  color: #fff; 
  position: relative; /* 为伪元素定位做准备 */
}
/* 默认收起状态：显示+ */
.header::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  font-size: 1.2em;
  font-weight: bold;
}
/* 展开状态：切换为- */
.header.expanded::after {
  content: "-";
}

简化的jQuery代码（只负责切换类） #

$(window).load(function(){ 
  $(".header").click(function () { 
    const $header = $(this); 
    const $content = $header.next(); 
    
    $content.slideToggle(500, function () { 
      // 切换expanded类，CSS会自动处理符号变化
      $header.toggleClass('expanded');
    }); 
  }); 
}); 

两种方法都能完美实现你要的效果：收起时标题后显示+，展开时切换为-。如果追求样式和逻辑分离，更推荐第二种方法~

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