时间戳

首页 > 解决方案 > 带有关闭按钮的纯基于 CSS 的下拉菜单

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

问题描述

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

我的问题是我试图在下拉列表中添加一个关闭按钮，但我似乎无法弄清楚如何实现这一点。我想要做的是跨度的焦点（关闭......如果有帮助，我可以用一个按钮替换）可能会松散父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，如果可以，我将如何去做？

标签： css

解决方案

您可以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>

推荐阅读