Question

使用JavaScript似乎可能存在过渡导致菜单关闭问题的问题。在此MWE中，通过单击菜单图标或将鼠标悬停在左侧菜单中，应会打开该菜单。使用mouseout也可以正常关闭。但是，当尝试通过单击关闭图标来关闭时，存在一些差异：它无法正常工作。这可能是由于过渡效应造成的吗？删除过渡后，它似乎已正确关闭。如何保留过渡，同时通过鼠标移出并单击相关图标使菜单正确关闭？

谢谢。

MVE：

<html><head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <style> 
  #title {text-align:right}
  #menu {display:block;height:100%;width:180px; position:fixed;top:0;left:-120px; overflow:visible;background:lightgrey;transition:.3s}
  #menuicon, #closeicon {position:absolute;top:1em;left:150px;cursor:pointer}
  #closeicon {display:none}
 </style> 
 <script> 
  function menutoggle(x) {
   if (x) {
    document.getElementById('menu').style.left = '0';
    document.getElementById('menuicon').style.display = 'none';
    document.getElementById('closeicon').style.display = 'block';
   } else {
    document.getElementById('menu').style.left = '-120px'; 
    document.getElementById('menuicon').style.display = 'block';
    document.getElementById('closeicon').style.display = 'none';
   }
  } 
 </script> 
</head>
<body> 
<div id="menu" onmouseover="menutoggle(1)" onmouseout="menutoggle()"> 
 <span id="closeicon" onclick="menutoggle()">X</span>
 <span id="menuicon" onclick="menutoggle(1)">=</span>
</div> 
<p id="title">Title</p>
</body></html>``

过渡和鼠标悬停

0 个答案: