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如下所示。我只是想让它与'test'的文本一起工作。我可以稍后进行链接

 <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>'test'节目。

我坚持要将鼠标悬停在该菜单项上以显示下拉列表。

Answer 1

你试图展示多个元素。拿第一个并正确显示它。

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

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

无法获得javascript下拉列表

1 个答案: