求助：jQuery点击<div>的宽度切换动画仅能运行一次

我之前也碰到过一模一样的情况！第一次点击正常展开，第二次明明事件触发了却没反应，大概率是状态切换的逻辑或者CSS动画的设置出了问题，咱们一步步来排查和解决：

最常见的错误原因：直接操作style属性的判断逻辑不可靠 #

很多人会直接通过element.style.width来判断当前状态，但这里有个坑：如果初始宽度是在CSS样式表中设置的（不是行内样式），element.style.width初始值是空字符串，第一次点击设置成目标宽度后，第二次判断可能因为浏览器返回的格式问题（比如带小数点、空格）导致判断失败，看起来事件触发了但逻辑没走到缩回的分支。

比如错误示例：

const box = document.querySelector('.box');
box.addEventListener('click', () => {
  console.log('点击触发');
  // 这里的判断很容易出问题
  if (box.style.width === '300px') {
    box.style.width = '100px';
  } else {
    box.style.width = '300px';
  }
});

可靠的解决方案：用类名切换状态 #

这是前端处理这类交互的标准做法，逻辑清晰还不容易出错：

第一步：编写CSS动画样式 #

.box {
  width: 100px; /* 初始宽度 */
  height: 100px;
  background-color: #42b983;
  transition: width 0.3s ease; /* 关键：设置宽度变化的过渡动画，双向生效 */
  cursor: pointer;
}

/* 展开状态的类 */
.box.expanded {
  width: 300px; /* 指定展开宽度 */
}

第二步：编写JS交互逻辑 #

const box = document.querySelector('.box');

box.addEventListener('click', () => {
  console.log('点击触发');
  // 核心：用toggle方法切换类名，自动处理展开/缩回状态
  box.classList.toggle('expanded');
});

// 如果需要在动画结束时执行逻辑（比如你提到的console.log），监听transitionend事件
box.addEventListener('transitionend', (e) => {
  // 可以判断一下是哪个属性的动画结束，避免其他属性的过渡干扰
  if (e.propertyName === 'width') {
    console.log('宽度动画结束了！');
    // 这里可以添加动画结束后的操作，比如更新提示文本、触发其他交互等
  }
});

额外排查点 #

如果用了类名切换还是有问题，检查这几点：

1. 有没有其他CSS规则覆盖了.box或.box.expanded的width属性？比如用了!important或者更高优先级的选择器
2. 是不是动画还没结束就连续点击？可以加个锁，比如在动画过程中暂时禁用点击事件，避免状态混乱：

let isAnimating = false;
box.addEventListener('click', () => {
  if (isAnimating) return;
  isAnimating = true;
  box.classList.toggle('expanded');
});

box.addEventListener('transitionend', (e) => {
  if (e.propertyName === 'width') {
    isAnimating = false;
    console.log('动画结束，可再次点击');
  }
});

这样处理后，你的展开/缩回交互应该就能正常工作了，动画结束的逻辑也能准确触发~

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