JavaScript实现菜单点击后箭头旋转朝下的开发问题

不需要改动原有交互逻辑，顺着现有代码结构补充类名标识、过渡效果和状态联动规则即可实现目标效果，具体调整如下：

调整HTML结构 #

给原有的箭头图标加专属类名方便样式控制，移除标签上的行内样式：

<a href="#/" class="pricing-button is-featured open"> Free trial 
  <i class="fa fa-arrow-circle-right menu-arrow"></i>
</a>
<ul class="pricing-features trip">
  <li class="pricing-features-item"> sleeps</li>
  <li class="pricing-features-item">workers for more powerful apps</li>
  <button class="model-btn">Close</button>
</ul>

补充CSS规则 #

保留原有CSS内容不变，新增以下样式块：

.menu-arrow {
  font-size: 18px;
  /* 旋转动画和菜单展开的节奏保持一致 */
  transition: transform 0.2s ease-in-out;
  /* 以箭头中心为旋转原点，避免转动时出现位置偏移 */
  transform-origin: center center;
  /* 初始状态保持朝右的默认朝向 */
  transform: rotate(0deg);
  margin-left: 4px; /* 和前方文字留适当间距，视觉更协调 */
}

/* 菜单展开状态下，箭头顺时针旋转90度指向下方 */
.open.active .menu-arrow {
  transform: rotate(90deg);
}

同步调整JS逻辑 #

在原有类名操作的基础上，打通按钮状态和箭头旋转的联动，关闭菜单时同步重置状态：

const openBtn = document.querySelector(".open");
const trips = document.querySelector(".trip");
const closeBtn = document.querySelector(".model-btn");

openBtn.addEventListener("click", function() {
  trips.classList.add("show");
  // 给按钮加激活状态，触发箭头旋转
  openBtn.classList.add("active");
});

closeBtn.addEventListener("click", function() {
  trips.classList.remove("show");
  // 关闭菜单时移除激活状态，箭头转回朝右的初始位置
  openBtn.classList.remove("active");
});

调整完成后，点击菜单按钮时，箭头会和菜单同步平滑旋转，从朝右的状态转到朝下的角度；点击关闭按钮时，箭头会随菜单收起转回初始朝向，动画节奏和原有交互完全匹配。

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