使用jQuery 1.12.4实现点击时旋转chevron 180度的功能异常排查

核心问题溯源 #

• 无状态切换逻辑：当前代码在点击后会强制把SVG的旋转值固定为180度，既没有重复点击后恢复初始角度的逻辑，也没法和折叠面板的展开、收起状态保持同步
• 缺失SVG旋转基准设置：SVG元素的默认旋转中心和普通HTML元素不同，默认以自身画布的左上角(0,0)为旋转原点，直接设置rotate(180deg)会导致SVG直接偏移出可视区域，视觉上完全看不到旋转效果，很容易被误判为代码未生效
• 无过渡动画兜底：没有设置transition属性的话，旋转动作是瞬间跳变的，没有流畅的动画反馈，会进一步加剧“功能没实现”的感知
• 事件绑定逻辑可靠性不足：直接给外层容器绑定click事件，没有和Bootstrap折叠组件的生命周期挂钩，容易因为a标签默认跳转行为、事件冒泡，导致旋转状态和实际折叠面板的状态不同步
• 旧版jQuery兼容问题：jQuery 1.12.4对SVG元素的css属性赋值场景，部分浏览器下不会自动补全transform的渲染规则，没有基础样式兜底的话属性会被直接忽略

可落地的修复代码 #

$(document).ready(function() {
  // 绑定Bootstrap折叠组件的状态切换事件，保证和面板展开/收起动作完全同步
  $('#view-more').on('show.bs.collapse hide.bs.collapse', function() {
    const $chevronSvg = $('.smb-chevron-container > a > em > svg');
    // 给目标SVG补全基础样式，解决旋转偏移、无动画的问题
    $chevronSvg.css({
      'transition': 'transform 0.3s ease',
      'transform-origin': 'center center' // 强制将旋转中心设为元素中心，避免偏移
    });
    // 基于类名做状态切换，避免硬编码值导致的状态错乱
    const isRotated = $chevronSvg.hasClass('is-rotated');
    $chevronSvg.css('transform', isRotated ? 'rotate(0deg)' : 'rotate(180deg)')
               .toggleClass('is-rotated');
  });
});

适配现有环境的注意事项 #

• RTE将<i>标签自动转换为<em>标签的逻辑不需要特殊处理，现有选择器已经匹配了「容器>a>em>svg」的嵌套结构，只要SVG在em标签内部的层级不变，就能正常选中目标元素
• 不需要调整原有SVG的尺寸、viewBox参数，只要补全旋转中心的基准设置，就不会出现旋转后的位置偏移问题
• 不要仅靠给外层容器绑定click触发旋转动作，一定要和Bootstrap折叠组件的官方生命周期事件绑定，避免交互状态错位

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