单击下拉菜单中的任何链接后如何关闭仅 CSS 下拉菜单？

Question

我正在开发一个 React 网站，其中有一个带有 2 个下拉菜单的导航菜单。在桌面上，将鼠标悬停在父菜单中后会显示下拉菜单。在那里我只使用 CSS 悬停来显示下拉列表。当我单击下拉页面中的任何链接时，它会发生变化，但单击后下拉列表并未关闭。单击其链接后，是否有使用 CSS 进行下拉的解决方案？

我的CSS代码是这样显示下拉列表的：

.subMenu{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 140px;  
    transition: all 0.3s ease;
    z-index: 1000;
}
.hasSubmenu:hover .subMenu {
    opacity: 1;
    visibility: visible;
    top: 80px;
}

我有类似的东西来关闭下拉菜单：

.subMenu:active {
    opacity: 0;
    visibility: hidden;
}

请查看我的截图：

Answer 1

您可以将 JavaScript 事件侦听器附加到子菜单的 ul 中，无论何时单击，您都可以执行类似操作

let ulList=document.querySelector('.submenu')
let ulElements=document.querySelector('.submenu--items')
ulList.addEventListener('click',()=>{
  ulElements.style.visibility="hidden";
})

由于您没有附加 HTML 代码，因此很难理解此代码段，但是， 这应该可以解决问题.....