我有一个下拉菜单类似的一个here。我需要相同的行为,除了dropdown-content类应该隐藏时,用户点击任何项目。我正在寻找一个可能的CSS解决方案,这样我就不必写任何JS相同。我尝试了不同的方式,但没有得到我需要的行为,由于特殊性。任何投入将高度赞赏。
dropdown-content
r7xajy2e1#
你应该使用display: none。或者用JS写它,如下所示:
display: none
document.getElementById("dropdown-content-id").style.display = "none";
mklgxw1f2#
为了补充acharb07所说的,只需在HTML文档中添加一个script标记。虽然通常不喜欢在HTML中编写JS,但在您的情况下,这似乎是正确的。您的代码将是
<script>document.getElementById("dropdown-content-id").style.display = "none";</script>
就这么简单。
vcirk6k63#
这不是正确的方法,尽管可以通过使用focus-within伪属性来实现所需的效果。只需要添加下面的样式。
focus-within
.dropdown-content:focus-within { display:none !important; }
请检查下面您作为示例提供的更新示例。第一次
3条答案
按热度按时间r7xajy2e1#
你应该使用
display: none
。或者用JS写它,如下所示:mklgxw1f2#
为了补充acharb07所说的,只需在HTML文档中添加一个script标记。虽然通常不喜欢在HTML中编写JS,但在您的情况下,这似乎是正确的。您的代码将是
就这么简单。
vcirk6k63#
这不是正确的方法,尽管可以通过使用
focus-within
伪属性来实现所需的效果。只需要添加下面的样式。
请检查下面您作为示例提供的更新示例。
第一次