点击导航栏下拉菜单时如何让Font Awesome箭头图标旋转90度

实现方案 #

你只需要修改CSS和现有JS代码即可完成箭头旋转效果，修改方式如下：

1. 更新CSS样式 #

给箭头添加过渡动画和激活态的旋转规则：

.nav-Links ul li .Sub-menu-1 ul li,
.nav-Links ul li .Sub-menu-2 ul li {
  width: 110px;
  padding: 5px;
  background: transparent;
  border-radius: 0;
  text-align: left;
}

.fas.fa-chevron-left {
  display: inline-block;
  padding-left: 5px;
  /* 新增过渡属性，让旋转动画更丝滑 */
  transition: transform 0.3s ease;
}

/* 新增激活状态下的箭头旋转规则，朝左的箭头转90度后刚好朝下 */
.click.active .fas.fa-chevron-left,
.click2.active .fas.fa-chevron-left {
  transform: rotate(90deg);
}

2. 更新JS逻辑 #

在切换子菜单显示状态的同时，给当前点击的菜单父元素切换激活类：

let click = document.querySelector('.click');
let list = document.querySelector('.Sub-menu-1');
click.addEventListener("click", () => {
  list.classList.toggle('NewSub-menu-1');
  // 新增：切换当前菜单的激活类，控制箭头旋转状态
  click.classList.toggle('active');
});

let click2 = document.querySelector('.click2');
let list2 = document.querySelector('.Sub-menu-2');
click2.addEventListener("click", () => {
  list2.classList.toggle('NewSub-menu-2');
  // 新增：切换当前菜单的激活类，控制箭头旋转状态
  click2.classList.toggle('active');
});

调整说明 #

如果需要修改旋转方向、动画速度，直接调整CSS中transform的旋转角度、transition的时长参数即可。

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