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来使close元素变得可聚焦：

.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>

Answer 2

尝试使用CSS复选框进行谷歌搜索，稍后再谢谢;）

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

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

您可以使用mediaQueries轻松隐藏或更改它

纯CSS基础的下拉菜单，带有关闭按钮

2 个答案: