JS实现点击导航列表项旋转Font Awesome箭头图标方案

这个效果不适合用纯CSS实现：纯CSS没有支持持久点击切换的原生状态伪类，:active仅在鼠标按住时生效，:focus会在点击页面其他区域时自动失焦，无法满足导航菜单点击后保持箭头状态、再次点击才收回的交互需求。你当前采用的JS切换class+CSS控制旋转的思路是最高效的，代码没生效是几个小问题导致的。

现有代码问题 #

• 未阻止<a>标签默认跳转行为：点击带href="#"的链接会触发页面锚点跳转、刷新，刚切换的class会被直接重置，视觉上就像交互完全没生效。
• 存在冗余CSS属性：重复给图标元素设置transform-origin，不影响功能但属于无效代码。
• CSS语法错误：font-weight:600px写法错误，字重属性不需要加px单位，正确值为600，该错误不影响旋转功能但会导致字体粗细设置失效。

修正后可运行代码 #

JavaScript #

const acc = document.getElementsByClassName("switch");
for (let i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function(e) {
    // 阻止a标签默认跳转刷新
    e.preventDefault();
    this.classList.toggle("iconUp");
    // 无实际用途的active类切换可直接删除，保留不影响功能
  });
}

CSS #

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');

body {
    display:block;
    margin:8px;
}

li, a {
    font-family: "Open Sans", sans-serif;
    font-size:14px;
    text-decoration:none;
    font-weight:600;
    color:black;
}

header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 10%;
}


.Nav_links {
    list-style: none;
}

.Nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

.Nav_links li, a:hover {
    transition: 400ms;
    color:grey;
}

#Login_nav {
    display:flex;
    align-items:center;
    gap:1rem;
}

.switchIconRotate {
    transform-origin: center;
    transition: transform 0.2s linear;
}

.iconUp .fa-solid {
    transform: rotate(180deg);
}
  
#Demobutton {
    cursor:pointer;
    background-color: #4EC843;
    border-radius:34px;
    border:none;
    color: white;
    width:130px;
    height:35px;
    font-family:"Open Sans", sans-serif;
    font-weight:600;
    font-size:14px;
}

#Demobutton:hover {
    background-color: #20D62C;
    transition:800ms;
}

#Navbarline {
    width:80%;
    border-width:1.5px;
    opacity:15%;
}

HTML #

<header>
  <script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
  <img class="logo" src="images/logo_image.svg" alt="logo">
  <nav>
    <ul class="Nav_links">
      <li><a class="switch" href="#">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>  
  </nav>
  <div id="Login_nav">
    <a href="#">Login</a> 
    <a href="#"><button id="Demobutton">Get demo</button></a> 
  </div>
</header>

补充提示 #

• 如果后续需要配套实现下拉菜单展开/收起、点击页面其他区域自动收回菜单和箭头的逻辑，直接在现有JS的点击回调里补充对应逻辑即可，不需要改动旋转效果的核心代码。
• 不要用纯CSS的隐藏checkbox hack实现该交互，这类方案可访问性差、维护成本高，效率远低于当前的JS切换class方案。

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