伪Class:focus-within 无法正常工作

Question

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

li class="has-sub-menu" when I click on it to show the ul class="sub-menu" it get disappear.

有人能帮帮我吗？

这是我的 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>

Answer 1

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

除了空的 href 属性之外，这个问题在于它聚焦（因此我们看到了子菜单），但随后立即移动到 link（空的）并且没有聚焦。所以我们看到子菜单一闪然后就消失了。

那么我们如何才能将可聚焦元素放入 li 元素中呢？

MDN 有这样的建议：

onclick events Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Use a button instead. In general, you should only use a hyperlink for navigation to a real URL.

所以这个片段使用问题中给出的代码，更改按钮的 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>

伪Class:focus-within 无法正常工作

Pseudo-Class:focus-within does not work correctly

html

css

pseudo-class