旋转图标，如果点击列表项目与javascript

Question

所以对于我的导航栏，我想让我的箭头旋转180度时点击，虽然我已经尝试了很多东西与CSS或JavaScript，我不知道什么是最有效的方式去做这个。我选择的图标是从font-awesome中导入的。

我试着实现javascript来完成它，还没有弄清楚。CSS应该起到作用吗?还是我在这里做错了什么?

const acc = document.getElementsByClassName("switch");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
this.classList.toggle("iconUp");
});
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;626&display=swap');
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
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: all 0.2s linear;
}
.iconUp .fa-solid {
transform-origin: center;
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:600px;
font-size:14px;
}
#Demobutton:hover {
background-color: #20D62C;
transition:800ms;
}
#Navbarline {
width:80%;
border-width:1.5px;
opacity:15%;
}

<header>
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<img class="logo" src="images/logo_image.svg" alt="logo">  <!-- Svg needs to work -->
<nav> <!-- Navigation menu -->
<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>

Answer 1

我添加了一个小js脚本和2个css类。还将图标更改为箭头，以便您可以看到它的移动。

document.querySelector('#Demobutton').addEventListener("click",
(e)=>{
document.querySelector('header .logo').classList.toggle('rotate');
}, false)

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;626&display=swap');
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
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: all 0.2s linear;
}
.iconUp .fa-solid {
transform-origin: center;
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:600px;
font-size:14px;
}
#Demobutton:hover {
background-color: #20D62C;
transition:800ms;
}
#Navbarline {
width:80%;
border-width:1.5px;
opacity:15%;
}

/*my code*/
img.logo {
transition: transform 1s ease-in;
}
img.logo.rotate {
transform: rotate(360deg);
}

<header>
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<img class="logo" src="https://uxwing.com/wp-content/themes/uxwing/download/02-arrow-direction/arrow-left.svg" alt="logo">  <!-- Svg needs to work -->
<nav> <!-- Navigation menu -->
<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>