在CSS中单击时隐藏下拉菜单

q5lcpyga  于 2022-11-19  发布在  其他
关注(0)|答案(3)|浏览(195)

我有一个下拉菜单类似的一个here。我需要相同的行为,除了dropdown-content类应该隐藏时,用户点击任何项目。我正在寻找一个可能的CSS解决方案,这样我就不必写任何JS相同。
我尝试了不同的方式,但没有得到我需要的行为,由于特殊性。任何投入将高度赞赏。

r7xajy2e

r7xajy2e1#

你应该使用display: none。或者用JS写它,如下所示:

document.getElementById("dropdown-content-id").style.display = "none";
mklgxw1f

mklgxw1f2#

为了补充acharb07所说的,只需在HTML文档中添加一个script标记。虽然通常不喜欢在HTML中编写JS,但在您的情况下,这似乎是正确的。您的代码将是

<script>document.getElementById("dropdown-content-id").style.display = "none";</script>

就这么简单。

vcirk6k6

vcirk6k63#

这不是正确的方法,尽管可以通过使用focus-within伪属性来实现所需的效果。
只需要添加下面的样式。

.dropdown-content:focus-within {
    display:none !important;
}

请检查下面您作为示例提供的更新示例。
第一次

相关问题