javascript - 无法使 javascript 下拉菜单正常工作

Question

我有一个 Javascript 菜单。悬停并单击主菜单项可以正常工作，但是我无法使下拉菜单正常工作。

menu.js 是

 /* When the user clicks on the button,
     toggle between hiding and showing the dropdown content */
 function myFunction() {
   //document.getElementById("myDropdown").classList.toggle("show");
   //document.getElementsByClassName("dropdown-content").show);
   //document.getElementById("pmd").classList.toggle("show");
   pmd.show;
 }
 }
 // Close the dropdown if the user clicks outside of it
 window.onclick = 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');
       }
     }
   }
   if(!event.target.matches('.dropbtnpm')) {
     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');
     }
   }
 }

我想要下拉菜单的 HTML 如下所示。我只是想让它与“测试”文本一起使用。我可以稍后做链接

 <td><button onmouseover="myFunction();"
 onclick="location.href='property-mngt.html';" value="Property Management"
 class="dropbtn">PROPERTY MANAGEMENT</button>
<div id="pmd" class="dropdown-content"> test </div>
 </td>

CSS 是

.dropbtn {
  border:  none;
  padding: 16px;
  cursor: pointer;
  background-color: #ffffff;
  color: black;
  height: 125px;
  min-height: 125px;
  font-size: 12px;
}
.dropbtn:hover, .dropbtn:focus {
  background-color: #004b8d;
  color: white;
  font-size: 12px;
}
.dropdown {
  position: relative;
  color: #ffff33;
}
.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  display: none;
}
.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  color: white;
}
.dropdown a:hover {
  background-color: #f1f1f1;
  color: black;
}
.show {
  border: 1px solid #33ccff;
  display: block;
  visibility: visible;
  background-color: #004b8d;
  color: white;
  font-family: Arial,Helvetica,sans-serif;
  font-size: small;
}
.dropdown-content a:hover {
  background-color: #f1f1f1;
  color: black;
}

我的目标是在将鼠标悬停在特定菜单项上时显示下拉列表。如果我将 html 更改为 <div id="pmd" class="dropdown-content.show"> test </div> “测试”显示在菜单上。

我坚持让鼠标悬停在该菜单项上以显示下拉菜单。

Answer 1

您正在尝试显示多个元素。取第一个并正确显示。

document.getElementsByClassName('dropdown-content')[0].style.display = 'block'

或使用 document.querySelector('dropdown-content')