无法获得javascript下拉菜单

问题描述：

我有一个Javascript菜单。然而，悬停并点击主菜单项可以正常工作，但无法使下拉框工作。无法获得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>'test'显示在菜单上。

我一直在获取该菜单项的鼠标悬停来显示下拉菜单。

的JavaScript代码似乎并不完整。 'pmd.show'应该做什么，'pmd'是什么，并且至少有一个花括号太多。 – gus27

仅仅因为我很好奇：为什么你使用javascript来显示菜单？为什么不使用CSS和HTML，这样就可以确保你的菜单对所有人都可用，甚至包含JS和CSS的人都可以关闭。 – junkfoodjunkie

另外，你为什么使用'

答

您试图显示多个元素。拿第一个和正确显示它。

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

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

我用第二个选项，它工作。但是，根据上述评论，我将菜单改为CSS/HTML。 –

无法获得javascript下拉菜单

相关推荐