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

【问题标题】：How to close CSS only dropdown menu after click any link in dropdown?单击下拉列表中的任何链接后如何关闭仅 CSS 下拉菜单？
【发布时间】：2021-08-28 04:55:23
【问题描述】：

我正在开发一个 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;
}

请查看我的截图：

【问题讨论】：

标签： css reactjs drop-down-menu dropdown

【解决方案1】：

您可以将 JavaScript 事件侦听器附加到子菜单的 ul，并且每当您单击时，您都可以执行类似的操作

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

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

【讨论】：