Mouse Leave事件未正确触发：按钮hover展开后无法正常收回如何解决？

问题根因 #

1. 全局animated状态逻辑错误：事件触发后无论是否进入定时器分支，都会直接将animated设为true，若100ms内快速触发mouseenter和mouseleave，后触发的事件会因为animated为true直接跳过执行逻辑，导致收/展操作失效。
2. 未做定时器清除：快速在元素上进出时，前一次触发的定时器没有被清理，会延迟100ms执行，出现已经移开鼠标反而触发展开、或者已经移入反而触发收回的错乱。
3. 全局状态冲突：如果页面有多个可展开按钮，共用同一个animated变量会导致不同按钮的状态互相干扰。
4. DOM节点读取不稳定：通过childNodes索引读取子节点，若DOM结构出现变化（比如多了空白文本节点），会取错元素导致类名操作失效。

可行解决方案 #

核心优化思路：给每个元素单独存储定时器ID，每次触发新事件时先清理前一次的定时器，避免冲突，无需额外设置全局状态变量即可解决问题。
修改后的代码如下：

options.forEach(option => {
  // 给当前元素单独存储定时器ID，不和其他元素冲突
  let timer = null;
  // 用选择器取元素比索引取更稳定，替换为你实际的类名即可
  const btnExpandable = option.querySelector('.btn--expandable');
  const optionsContainer = option.querySelector('.options');

  option.addEventListener('mouseenter', () => {
    // 先清掉之前未执行的收回定时器
    clearTimeout(timer);
    timer = setTimeout(() => {
      btnExpandable.classList.add('btn--expandable-expand');
      optionsContainer.classList.add('options--expand');
    }, 100);
  });

  option.addEventListener('mouseleave', () => {
    // 先清掉之前未执行的展开定时器
    clearTimeout(timer);
    timer = setTimeout(() => {
      btnExpandable.classList.remove('btn--expandable-expand');
      optionsContainer.classList.remove('options--expand');
    }, 100);
  });
});

如果之前用CSS实现存在动画同步问题，可以给两个元素的transition属性设置完全相同的时长和缓动函数，即可保证动画进度一致。

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