Javascript 同时隐藏元素和触发单击事件

我试图构建一个简单的下拉菜单，当鼠标悬停在div上时会显示。当鼠标悬停在div或任何下拉元素上时，此下拉菜单应保持打开状态。正如您在下面的代码片段中看到的，我只使用CSS完成了这项工作

但是，当用户单击其中一个下拉元素时，我预计会发生两件事：

下拉菜单已关闭/隐藏

将触发单击事件

我试图使用

：active

伪类隐藏下拉菜单。但是，如果我这样做，则不会触发单击事件

如何隐藏下拉菜单并触发单击事件

函数printConsole（）{
console.log（“事件触发”）；
}
document.queryselectoral（'.shop'）.forEach(
shop=>shop.addEventListener（'单击'，打印控制台）
);
.shop选择器svg{
填充：2px；
边界半径：50%；
背景颜色：橙色；
显示：块；
高度：2em；
宽度：2em；
}
.shop选择器svg:悬停+.shop下拉列表{
能见度：可见；
不透明度：1；
}
.商店选择器.商店下拉列表{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
对正内容：空间均匀；
调整项目：灵活启动；
z指数：1；
过渡：所有0.7秒；
可见性：隐藏；
不透明度：0；
}
.店铺选择器.店铺下拉列表：悬停{
能见度：可见；
不透明度：1；
}
.店铺选择器.店铺下拉列表：激活{
显示：无；
}
.商店选择器.商店下拉列表.商店{
保证金：5px0；
填充物：2px 5px；
边界半径：3px；
背景颜色：橙色；
}

店名一
店名二
店名三
单击将不起作用。因为悬停是由鼠标完成的，因此，请尝试使用鼠标事件，如“mousedown”。。。让我们检查一下。
单击将不起作用。因为悬停是由鼠标完成的，因此，请尝试使用鼠标事件，如“mousedown”。。。让我们检查一下。
您是否尝试代理单击处理程序，并在菜单列表上使用切换类，而不是对菜单项使用：active？
我认为这应该是正确的方向。
您是否尝试代理单击处理程序，并在菜单列表上使用切换类，而不是对菜单项使用：active？
我认为这应该是正确的方向。
我认为这就是你需要的

我删除了你的css
：active
class def，并在
商店选择器
这行的顶部添加了一个自定义的
.active
类，只是为了显示你的下拉列表
.shop-selector.active.shop下拉列表

小js切换
.active
类和
打印控制台
=>
添加操作


const menu=document.getElementById（'menu'）；
menu.addEventListener（'mouseenter'，e=>{
e、 target.classList.add（'active'）
});
menu.addEventListener（'mouseleave'，e=>{
e、 target.classList.remove（'active'）
});
//这就是你需要的
函数addAction（）{
console.log（“事件触发”）；
menu.classList.remove（'active'）；
}
document.queryselectoral（'.shop'）.forEach(
shop=>shop.addEventListener（'click'，addAction）
);
.shop选择器svg{
填充：2px；
边界半径：50%；
背景颜色：橙色；
显示：块；
高度：2em；
宽度：2em；
}
.商店选择器.商店下拉列表{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
对正内容：空间均匀；
调整项目：灵活启动；
z指数：1；
过渡：所有0.7秒；
可见性：隐藏；
不透明度：0；
}
.shop-selector.active.shop下拉列表{
能见度：可见；
不透明度：1；
}
.商店选择器.商店下拉列表.商店{
保证金：5px0；
填充物：2px 5px；
边界半径：3px；
背景颜色：橙色；
}

店名一
店名二
店名三
我想这就是你需要的

我删除了你的css
：active
class def，并在
商店选择器
这行的顶部添加了一个自定义的
.active
类，只是为了显示你的下拉列表
.shop-selector.active.shop下拉列表

小js切换
.active
类和
打印控制台
=>
添加操作


const menu=document.getElementById（'menu'）；
menu.addEventListener（'mouseenter'，e=>{
e、 target.classList.add（'active'）
});
menu.addEventListener（'mouseleave'，e=>{
e、 target.classList.remove（'active'）
});
//这就是你需要的
函数addAction（）{
console.log（“事件触发”）；
menu.classList.remove（'active'）；
}
document.queryselectoral（'.shop'）.forEach(
shop=>shop.addEventListener（'click'，addAction）
);
.shop选择器svg{
填充：2px；
边界半径：50%；
背景颜色：橙色；
显示：块；
高度：2em；
宽度：2em；
}
.商店选择器.商店下拉列表{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
对正内容：空间均匀；
调整项目：灵活启动；
z指数：1；
过渡：所有0.7秒；
可见性：隐藏；
不透明度：0；
}
.shop-selector.active.shop下拉列表{
能见度：可见；
不透明度：1；
}
.商店选择器.商店下拉列表.商店{
保证金：5px0；
填充物：2px 5px；
边界半径：3px；
背景颜色：橙色；
}

店名一
店名二
店名三
这确实有效！如果我在添加事件侦听器时通过
mousedown
更改
单击
，则下拉菜单将被隐藏，事件将被触发这实际上是有效的！如果我在添加事件侦听器时通过
mousedown
更改
click
，则下拉菜单将隐藏，事件将触发。这是非常有效的，因为单击下拉菜单的某个元素时会显示淡出效果。然而，我觉得我正在使用javascriptThis重新实现
hover
伪类，这是可行的，而且是预先准备好的