如何添加动画图标菜单下拉打开/关闭

Question

我在stackoverflow用户的帮助下构建了一个带有淡出动画的下拉菜单。一切都运转得很好。但是现在我想给按钮添加一个图标，它会根据下拉菜单的打开或关闭状态而变化。

我知道如何插入一个正常的图标，但我不知道如何显示一个不同的图标时，菜单打开。基本上，当下拉菜单打开时，我想显示一个X图标。而当它关闭时，一个不同的图标。

谁能帮我实现这个小目标?我是新来的，我正在尽可能多地学习，stack正在为您寻找有价值的资源。感谢您的回复，谢谢。

function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else { 
x.className += " w3-hide";
setTimeout(function(){
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");

},100)
}
}

/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0; 
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover > a {
color: #2E323A;
}
/*Icon Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.w3-container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.w3-dropdown-click {
position: absolute;
margin-top: 17px;
}
.w3-dropdown-content {
display: none;
padding: 20px;
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
position:relative;
animation:animateFromBottom .3s
}
@keyframes animateFromBottom {
from{bottom:-50px;opacity:0} to{bottom:0;opacity:1}
}
@keyframes animateToBottom {
from{bottom:0;opacity:1} to{bottom:-50px;opacity:0}
}
.w3-show-block,.w3-show {
display:block!important;
}
.w3-dropdown-content.w3-hide {
animation:animateToBottom .3s
}
.user_menu_button {
width: 100%;
background: #fbfbfb!important;
font-weight: 500!important;
}

<button onclick="myFunction()" class="user_menu_button">Account</button>
<div class="w3-container">
<div class="w3-dropdown-click">

<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">

<div class="user_menu header">
<span class="display name">Hello User</span>
<span class="display mail">User email...</span>
</div>   

<hr class="solid">  

<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user">1</i>
<span class="link_text">Dashboard</span>
</a>
</div>

<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping">2</i>
<span class="link_text">My Orders</span>
</a>
</div>

<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down">3</i>
<span class="link_text">Downloads</span>
</a>
</div>

<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear">4</i>
<span class="link_text">Settings</span>
</a>
</div>

<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket">5</i>
<span class="link_text">Logout</span>
</a>
</div>
</div>

</div>
</div>

Answer 1

你可以添加font-awesome图标(你必须导入字体awesome cdn,https://fontawesome.com

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

)

var menu = document.querySelector(".user_menu_button");
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
menu.innerHTML = "<i class="fa-solid fa-bars"></i>";
} else { 
x.className += " w3-hide";
menu.innerHTML = "<i class="fa-solid fa-xmark"></i>";
setTimeout(function(){
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");

},100)
}
}