如何用JS实现菜单显示时对应箭头180度旋转的交互效果

实现方案 #

你可以通过CSS过渡配合JS切换类的方式实现，动画更顺滑，维护也更方便。
首先添加CSS样式：

/* 箭头元素默认样式，可根据你原有箭头样式调整 */
#btn-films {
  /* 这里保留你原有箭头的样式，比如背景图、宽高之类的 */
  transition: transform 0.3s ease; /* 添加过渡动画，时长可以自己调 */
}

/* 旋转状态的类 */
#btn-films.rotate {
  transform: rotate(180deg);
}

然后修改你的JS逻辑，在切换菜单显示状态的同时切换箭头的类：

function toggleMenuFilms() {
  var menu = document.getElementById("mobile-menu-sub-div-films");
  var arrowBtn = document.getElementById("btn-films");
  if (menu.style.display === "block") {
    menu.style.display = "none";
    arrowBtn.classList.remove("rotate"); // 菜单关闭，移除旋转类
  } else {
    menu.style.display = "block";
    arrowBtn.classList.add("rotate"); // 菜单展开，添加旋转类
  }
}

如果不想加额外的CSS类，也可以直接在JS里修改transform属性：

function toggleMenuFilms() {
  var menu = document.getElementById("mobile-menu-sub-div-films");
  var arrowBtn = document.getElementById("btn-films");
  if (menu.style.display === "block") {
    menu.style.display = "none";
    arrowBtn.style.transform = "rotate(0deg)";
  } else {
    menu.style.display = "block";
    arrowBtn.style.transform = "rotate(180deg)";
  }
}
// 记得给#btn-films加transition: transform 0.3s ease; 才有动画效果

小提示：如果你的页面初始状态菜单就是展开的，记得给#btn-films元素默认加上rotate类，保证初始状态对应。

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