伪类：focus-within 无法正常工作答案

【问题标题】：Pseudo-Class:focus-within does not work correctly伪类：focus-within 无法正常工作
【发布时间】：2021-06-14 12:25:09
【问题描述】：

我在我的菜单上使用 pseudo-class:focus-within 来显示单击时的子菜单，但它显示了一秒钟，然后子菜单消失了。使用伪类时没有问题：hover，我只是有focus-within的问题。

li class="has-sub-menu" 当我点击它以显示 ul class="sub-menu" 它会消失。

有人可以帮帮我吗？

这是我的 HTML 和 CSS 代码。

li.has-sub-menu{
    position: relative;
    margin-right: 10px;
    padding-bottom: 5px;    
}

ul.sub-menu{
    position: absolute;
    top:20px ;
    box-shadow: 0px 0px 3px 3px #a1a1a1;
    border-radius:2%;
    border: 1px solid; 
    display: none;
    white-space: nowrap;
    min-width: 100px;
}

li.has-sub-menu:focus-within ul.sub-menu{
    display: block;
}

.sub-menu li{
    border-bottom:1px #a1a1a1 dashed;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 30px;
    position: relative;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul>
        <li class="has-sub-menu">
            <ul class="sub-menu">

                <li><a href="">VGA</a></li>
                <li><a href="">Power</a></li>
                <li><a href="">Case</a></li>
                <li><a href="">Network </a></li>
                <li><a href="">CPU</a></li>
                <li><a href="">CPU FAN</a></li>

            </ul><a href="">products</a>
        </li>
    </ul>
</body>

</html>

【问题讨论】：

我运行了演示，但无法弄清楚您到底在说什么。我究竟应该悬停/聚焦什么？
你用什么浏览器？
@TJ 旁边有向下箭头的那个。我使用 Chrome。
您的 HTML 有很多错误，包括致命错误。放入 HTML 验证器并修复它们...
你能创建一个[链接]stackoverflow.com/help/minimal-reproducible-example 鉴于有几个子菜单，我发现很难看到发生了什么。你能举一个例子来说明问题，但只有一个？

标签： html css pseudo-class

【解决方案1】：

代码使用锚标记元素，以便在 li 元素中具有可聚焦的元素。

与空的 href 属性一起存在的问题是它聚焦（所以我们看到子菜单）但随后立即移动到链接（它是空的）并且不聚焦。所以我们看到子菜单一闪而过，然后它就消失了。

那么我们可以做些什么来将一个可聚焦的元素放入 li 元素中呢？

MDN 有这个建议：

点击事件锚元素经常被滥用为假按钮将其 href 设置为 # 或 javascript:void(0) 以防止页面刷新，然后监听他们的点击事件。

这些虚假的 href 值在以下情况下会导致意外行为复制/拖动链接，在新标签/窗口中打开链接，书签，或当 JavaScript 加载、错误或被禁用时。它们还会向辅助技术传达不正确的语义，例如屏幕阅读器。

请改用button。通常，您应该只使用超链接用于导航到真实 URL。

所以这个 sn-p 使用问题中给出的代码，更改按钮的 a 元素，并从按钮样式中删除背景颜色和边框。

li.has-sub-menu {
  position: relative;
  margin-right: 10px;
  padding-bottom: 5px;
}

ul.sub-menu {
  position: absolute;
  top: 20px;
  box-shadow: 0px 0px 3px 3px #a1a1a1;
  border-radius: 2%;
  border: 1px solid;
  display: none;
  white-space: nowrap;
  min-width: 100px;
}

li.has-sub-menu:focus-within ul.sub-menu {
  display: block;
}

.sub-menu li {
  border-bottom: 1px #a1a1a1 dashed;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 30px;
  position: relative;
}

.has-sub-menu button {
  background-color: transparent;
  border: none;
}

<ul>
  <li class="has-sub-menu">
    <ul class="sub-menu">

      <li><a href="">VGA</a></li>
      <li><a href="">Power</a></li>
      <li><a href="">Case</a></li>
      <li><a href="">Network </a></li>
      <li><a href="">CPU</a></li>
      <li><a href="">CPU FAN</a></li>

    </ul><button>products</button>
  </li>
</ul>

【讨论】：