Question

www.mesogom.com/umass/

如果您检查链接，您会发现我这里有很多错误。我试图弄清楚为什么它在垂直方向上间隔这么大。我在JS中将onclick更改为onmouseover，但是遇到了这些JS / CSS问题。任何帮助表示赞赏。

这是JS：

/* When the user hovers on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}
    
// Close the dropdown menu if the user mouses outside of it
window.onmouseover = function(event) {
  if (!event.target.matches('.dropbtn')) {
    
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Answer 1

欢迎来到SO。将click换成mouseover时遇到的问题是您检查event.target的方式。仅当鼠标直接位于.dropbtn上方且没有任何子级上方时，它才会匹配。但是，有一个event.currentTarget property，它将始终与事件处理程序附加到的元素匹配。这将是正确的用法：

document.querySelector('.dropbtn').addEventListener('mouseover', function(event) {
     if (event.currentTarget...)
});

尽管不是典型的SO方式建议使用不同的语言来解决问题，但我强烈建议您考虑将CSS解决方案用于任何悬停菜单。如今更为简单和首选。 WC3 has a great tutorial on that.。但是，如果您打算使网站对移动设备友好，则可能需要保留单击菜单（在移动设备上无法很好地悬浮）。希望有帮助。

W3C的下拉菜单错误

1 个答案: