Javascript 单击项目后关闭css悬停下拉菜单

我想使用HTML、CSS和JavaScript在网页上创建一个经典的菜单栏。一切正常，但单击菜单项不会隐藏菜单。相反，菜单会一直显示，直到光标离开项目。这是不自然的，在基于触摸的设备上尤其麻烦。在线解决方案都使用jQuery，这对我来说既陌生又陌生。有没有不使用jQuery隐藏菜单的方法

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

---

我的小提琴：

首先，指定要处理的元素：

var el = this.parentNode;

然后，使用与CSS相同的逻辑，将

display

设置为

none

el.style.display = "none";

最后，在

30ms

之后，恢复内联样式以保持

悬停

效果：

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

}

---

希望能有所帮助。

这是处理单击事件的另一种方法：

HTML:

和JavaScript：

function onClick(event) {
    let list = event.children;
    setDisplayProperty(list);
}

function setDisplayProperty(list) {
    for (let item of list) {
        console.log(item.id);
        if(item.style.display == 'block')
            item.style.display = '';
        else
            item.style.display = 'block';
    }
}

---

你能解释一下为什么设置超时吗？因为它需要足够的延迟来根据浏览器重新绘制正确隐藏菜单。否则它将保持开放。请尝试在不使用setTimeout的情况下运行它以检查它。@Azametzin-您的解决方案适用于Chrome和Firefox，但不适用于Safari（在MacOS和iOS上都进行了测试）。

/*.dropdown:hover .dropdown-content {
    display: block;
}*/

function onClick(event) {
    let list = event.children;
    setDisplayProperty(list);
}

function setDisplayProperty(list) {
    for (let item of list) {
        console.log(item.id);
        if(item.style.display == 'block')
            item.style.display = '';
        else
            item.style.display = 'block';
    }
}