基于数据折叠状态切换图标功能失效问题求助

看起来你的问题出在没有监听折叠状态变化并触发图标更新的逻辑——你已经在a标签里定义了折叠/展开对应的图标数据，但这些data-*属性只是静态配置，不会自动和折叠状态联动。下面是针对Bootstrap Collapse组件的完整解决方案（从你的代码格式来看，你应该用的是Bootstrap的折叠功能）：

步骤1：给图标元素添加标识 #

首先给图标span加一个专属类，方便后续JavaScript定位：

<a data-toggle="collapse" data-collapse-icon="ChevronDown" data-expand-icon="ChevronUp" aria-expanded="false" aria-controls="advancedCollapse" href="#advancedCollapse">
  <span class="win-icon collapse-icon"></span>
</a>

步骤2：添加状态监听与图标切换逻辑 #

通过监听Bootstrap Collapse的show.bs.collapse和hide.bs.collapse事件，来切换图标：

// 监听折叠面板展开事件
$('.collapse').on('show.bs.collapse', function() {
  // 获取当前面板对应的触发按钮
  const triggerBtn = $(`a[href="#${this.id}"]`);
  // 从data属性中获取图标类名
  const collapseIcon = triggerBtn.data('collapse-icon');
  const expandIcon = triggerBtn.data('expand-icon');
  // 切换图标类
  triggerBtn.find('.collapse-icon').removeClass(collapseIcon).addClass(expandIcon);
  // 更新aria-expanded属性（确保无障碍属性正确）
  triggerBtn.attr('aria-expanded', 'true');
});

// 监听折叠面板收起事件
$('.collapse').on('hide.bs.collapse', function() {
  const triggerBtn = $(`a[href="#${this.id}"]`);
  const collapseIcon = triggerBtn.data('collapse-icon');
  const expandIcon = triggerBtn.data('expand-icon');
  triggerBtn.find('.collapse-icon').removeClass(expandIcon).addClass(collapseIcon);
  triggerBtn.attr('aria-expanded', 'false');
});

// 页面加载时初始化图标状态（避免初始状态错误）
$(document).ready(function() {
  $('[data-toggle="collapse"]').each(function() {
    const isExpanded = $(this).attr('aria-expanded') === 'true';
    const collapseIcon = $(this).data('collapse-icon');
    const expandIcon = $(this).data('expand-icon');
    const iconElement = $(this).find('.collapse-icon');
    
    if (isExpanded) {
      iconElement.addClass(expandIcon);
    } else {
      iconElement.addClass(collapseIcon);
    }
  });
});

特殊情况处理：如果图标是文字/HTML内容 #

如果你的ChevronDown和ChevronUp是文字图标（比如Unicode字符），而不是CSS类，只需要把切换类的代码改成修改元素内容即可：

// 展开时更新图标内容
iconElement.text(expandIcon);
// 收起时更新图标内容
iconElement.text(collapseIcon);

为什么之前的代码不生效？ #

你原来的代码只定义了图标对应的配置项，但没有告诉浏览器“当折叠状态变化时，要根据这些配置切换图标”。Bootstrap的Collapse组件只会处理面板的显示/隐藏，不会自动管理图标，所以必须通过自定义JavaScript来完成这个联动逻辑。

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