javascript - 单击元素后关闭 css 悬停下拉菜单

Question

我想使用 HTML、CSS 和 JavaScript 在网页上创建一个经典菜单栏。一切正常，但单击菜单项不会隐藏菜单。相反，菜单会一直出现，直到光标从元素上移开。这是不自然的，并且在基于触摸的设备上尤其麻烦。网上的解决方案都是用的jQuery，我觉得很陌生。有没有不使用 jQuery 隐藏菜单的方法？

function onButtonClick(event) {
  event.stopPropagation();
  console.log(event.target.id);
  //close menu here
}

我的 fiddle :https://jsfiddle.net/crlab/uq6at5mk/

Answer 1

首先，您指定要处理的元素:

var el = this.parentNode;

然后，使用与 CSS 相同的逻辑，将 display 设置为 none。

el.style.display = "none";

最后，在 30ms 之后，恢复内联样式以保留 hover 效果:

setTimeout(function() {
    el.style.removeProperty("display");
}, 30);

最终结果是这样的:

function onButtonClick(event) {
  event.stopPropagation();
  console.log(event.target.id);

  var el = this.parentNode;
  el.style.display = "none";
  setTimeout(function() {
        el.style.removeProperty("display");
  }, 30);

}

希望对您有所帮助。