如何在html中单击动画图标后显示菜单？

<div id="menu-container">
  <div class="icon">动画图标</div>
  <ul class="menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

#menu-container {
  position: relative;
}

.icon {
  cursor: pointer;
  /* 设置动画图标的样式 */
}

.menu {
  display: none;
  position: absolute;
  /* 设置菜单的样式 */
}

var icon = document.querySelector('.icon');
var menu = document.querySelector('.menu');

icon.addEventListener('click', function() {
  if (menu.style.display === 'none') {
    menu.style.display = 'block';
  } else {
    menu.style.display = 'none';
  }
});