点击父元素旋转子元素：按钮箭头180度动画旋转实现求助

我来帮你搞定这个箭头旋转的问题！你之前想用toggle方法的思路是对的，但可能是没把点击事件绑定和状态切换的逻辑理顺，咱们一步步调整代码来实现需求：

问题分析 #

你原来的代码已经搭好了箭头的初始样式，但缺少点击事件处理和状态切换的CSS类定义，直接操作transform属性很难实现可靠的切换，用CSS类来管理旋转状态是更稳妥的方式。

修改后的完整代码 #

HTML（把id改成class，方便批量处理）

<div class="button-back left">
  <div class="left-arrow-top"></div>
  <div class="left-arrow-bottom"></div>
</div>
<div class="button-back right">
  <div class="right-arrow-top"></div>
  <div class="right-arrow-bottom"></div>
</div>

CSS（添加旋转状态类和平滑过渡）

.button-back {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background-color 0.3s;
  cursor: pointer;
}
.button-back:hover {
  background-color: #2da6ff;
}
.left { left: 5%; }
.right { right: 5%; }

/* 左边箭头初始状态 */
.left-arrow-top {
  margin-bottom: 3px;
  width: 15px;
  height: 3px;
  position: relative;
  left: 30%;
  background: #e2e2e2;
  z-index: 3;
  transform: rotate(-45deg);
  transition: transform 0.3s ease; /* 添加平滑过渡动画 */
}
.left-arrow-bottom {
  margin-top: 3px;
  width: 15px;
  height: 3px;
  position: relative;
  left: 30%;
  background: #e2e2e2;
  z-index: 3;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

/* 左边箭头旋转180度后的状态 */
.left-arrow-top.rotated {
  transform: rotate(135deg); /* -45deg + 180deg = 135deg */
}
.left-arrow-bottom.rotated {
  transform: rotate(225deg); /* 45deg + 180deg = 225deg */
}

/* 右边箭头初始状态 */
.right-arrow-top {
  margin-bottom: 3px;
  width: 15px;
  height: 3px;
  position: relative;
  left: 40%;
  background: #e2e2e2;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.right-arrow-bottom {
  margin-top: 3px;
  width: 15px;
  height: 3px;
  position: relative;
  left: 40%;
  background: #e2e2e2;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

/* 右边箭头旋转180度后的状态 */
.right-arrow-top.rotated {
  transform: rotate(225deg); /* 45deg + 180deg = 225deg */
}
.right-arrow-bottom.rotated {
  transform: rotate(135deg); /* -45deg + 180deg = 135deg */
}

JavaScript（绑定点击事件，切换旋转状态）

// 获取所有带箭头的按钮
const backButtons = document.querySelectorAll('.button-back');

// 给每个按钮添加点击事件监听
backButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 根据按钮的位置（左/右）找到对应的箭头元素
    if (button.classList.contains('left')) {
      const topArrow = button.querySelector('.left-arrow-top');
      const bottomArrow = button.querySelector('.left-arrow-bottom');
      // 切换旋转状态类
      topArrow.classList.toggle('rotated');
      bottomArrow.classList.toggle('rotated');
    } else if (button.classList.contains('right')) {
      const topArrow = button.querySelector('.right-arrow-top');
      const bottomArrow = button.querySelector('.right-arrow-bottom');
      topArrow.classList.toggle('rotated');
      bottomArrow.classList.toggle('rotated');
    }
  });
});

关键改进点 #

1. 用CSS类管理状态：通过.rotated类定义箭头旋转后的样式，避免直接操作transform属性，让状态切换更清晰可靠；
2. 添加过渡动画：给箭头元素加上transition: transform 0.3s ease，让旋转过程更平滑自然；
3. 批量绑定事件：用querySelectorAll获取所有按钮，通过forEach循环绑定点击事件，代码更简洁；
4. 替换id为class：id是唯一标识，用class可以更灵活地处理多个相似元素。

现在点击每个按钮，箭头的两个部分就会各自旋转180度，再次点击又会转回去啦！

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