css - 带有关闭按钮的纯 css 下拉菜单

Question

所以我有一个简单的下拉菜单，它在悬停或焦点时激活(桌面悬停，移动焦点，效果很好。

我的问题是我想在下拉菜单中添加一个关闭按钮，但我似乎无法弄清楚如何实现这一点。我想做的是关注跨度(关闭......如果有帮助我可以用按钮替换)可能松散父 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 是否可行，如果可行，我将如何去做？

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>