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

Question

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

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

谁能帮我实现这个小目标？我是新手，我正在尝试尽可能多地学习，堆栈正在为您找到一个有价值的资源。感谢您的回复，谢谢。

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)
  }
}

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

How to add animate icon menu dropdown open / closed

html

javascript

css

icons

drop-down-menu