为Accordion手风琴标签头部添加展开/收起状态切换箭头的需求

我来帮你搞定这个手风琴箭头切换的问题！咱们一步步调整代码，就能实现面板关闭时显示向下箭头、展开时显示向上箭头的效果：

先把原来的静态"downarrow"文本换成一个可控制的箭头元素，这样后续能轻松切换状态：

<tr class="accordion">
  <td class="bg-light-blue text-mid" colspan="5"><span class="text-blue">@item.Key</span></td>
  <td class="bg-light-blue">
    <span class="accordion-arrow">▼</span> <!-- 初始默认显示向下箭头 -->
  </td>
</tr>

给箭头加基础样式，再定义展开状态的箭头效果，还能加个平滑过渡动画提升体验：

td.bg-light-blue{ background-color:rgb(233,242,253) }
.text-mid{ font-size:14px }

/* 箭头基础样式 */
.accordion-arrow {
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease; /* 平滑旋转过渡 */
}

/* 面板展开时的箭头状态 */
.accordion-arrow.expanded {
  transform: rotate(180deg); /* 旋转180度变成向上箭头 */
}

在点击手风琴头部时，除了切换面板的显示/隐藏，还要同步切换箭头的状态类：

$(function () { 
  $('tr.accordion').click(function () {
    // 切换当前头部下方的所有行的显示状态
    $(this).nextUntil('.accordion').slideToggle(20);
    // 切换当前头部箭头的expanded类，实现箭头旋转
    $(this).find('.accordion-arrow').toggleClass('expanded');
  });
});

这样修改后，每次点击手风琴头部，箭头会跟着面板的展开/关闭状态平滑旋转，用户体验更直观。用CSS旋转的方式比切换箭头字符更流畅，还能保持样式的一致性~

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