如何在移动设备上关闭基于悬停的CSS下拉菜单

@media only screen and (max-width: 768px) {
  /* 移动设备样式 */
  .dropdown:hover .dropdown-content {
    display: none;
  }
}

// 检测设备类型
function isMobileDevice() {
  return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}

// 禁用基于悬停的CSS下拉菜单
if (isMobileDevice()) {
  var dropdowns = document.getElementsByClassName("dropdown");
  for (var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].addEventListener("mouseover", function() {
      this.getElementsByClassName("dropdown-content")[0].style.display = "none";
    });
  }
}

var dropdowns = document.getElementsByClassName("dropdown");
for (var i = 0; i < dropdowns.length; i++) {
  dropdowns[i].addEventListener("touchstart", function() {
    this.getElementsByClassName("dropdown-content")[0].style.display = "none";
  });
}