用点击代替悬停来显示下拉菜单

Question

我试图添加一个函数onclick为我的下拉菜单，而不是显示当我悬停，我希望它显示当我点击它，你知道我能做什么吗?

我的下拉菜单位于"图像"旁边的网格图标上

这是我的代码库，所以你可以查看我的代码:https://github.com/Diefonro/HTML-CSS

你也可以看到现在显示的页面:https://diefonro.github.io/HTML-CSS

谢谢

Answer 1

您必须实现以下函数并在onclick事件上调用它。正如@Tom建议的那样，你需要从样式表

中删除下面的部分。

.dd-cont:hover .drop-d {
display: block;
}

这是我们捕获特定元素的方式，它具有特定的class，我们可以改变元素的样式，如下

function clickDD() {
const dropdown = document.querySelector('.drop-d');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}

这里是一个工作的例子(jsFiddle)从你的代码

p我没有将任何资产包含到小提琴

Answer 2

要处理点击事件，您可以查看EventListener或onclick属性。

下拉菜单显示在悬停时，因为这个CSS规则:

.dd-cont:hover .drop-d {
display: block;
}