一个带有关闭按钮的纯CSS下拉菜单

Question

我有一个简单的下拉菜单，它在悬停或聚焦时（桌面端为悬停，移动端为聚焦）会被激活，这很好用。

我的问题是，我正在尝试向下拉菜单添加一个关闭按钮，但我似乎无法弄清如何实现。我的想法是，在 span 元素获得焦点时（如果需要，可以使用按钮替换）可能使父 div 失去焦点以关闭它。由于下拉菜单是 100% 和 100% 高度的，因此只会在移动设备上显示关闭按钮，这样就没有办法单击其他区域来失去焦点，而不像桌面网站那样存在这个问题。

以下是我目前拥有的：

.group:hover .group-hocus\:block,
.group:focus .group-hocus\:block {
  display: block;
}

.hidden {
  display: none;
}

<div class="group">
  <button>open</button>
  <div class="group-hocus:block hidden">
    <span style="padding: 5px;">x Close</span><br />
    Content Here...
  </div>
</div>

只使用CSS，实现这个是否可能？如果可能，应该如何操作？

- Nate

Answer 1

您可以使用focus-within，并通过为其添加tabindex使您的关闭元素可聚焦：

.group:hover .group-hocus\:block,
.group:focus .group-hocus\:block {
  display: block;
}

.hidden {
  display: none;
}

.group-hocus\:block {
  width:200px;
  height:200px;
  border:3px solid red;
}
.group-hocus\:block span {
  font-size:25px;
  color:green;
  cursor:pointer;
  outline:none;
}
.group-hocus\:block:focus-within  {
 display:none!important;
}

<div class="group">
  <button>open</button>
  <div class="group-hocus:block hidden">
    <span style="padding: 5px;" tabindex="-1">x Close</span><br />
    Content Here...
  </div>
</div>

- Temani Afif

---

这在桌面上运行得很好，但当你打开Chrome/响应式并点击（关闭按钮）时，它会重新打开。 - Nate

Answer 2

试着谷歌一下 CSS 复选框 hack，之后感谢我 ;)

简而言之，它使用了一个输入复选框和一个标签。隐藏复选框，将标签样式设置为“X”。

然后在 CSS 中，您可以使用 input:checked .menu-open {blah blah blah}。

您可以很容易地使用 mediaQueries 隐藏或更改它。

- Richard Hewett