时间戳

首页 > 解决方案 > 为什么 li:focus 在显示或可见性上不起作用？

html - 为什么 li:focus 在显示或可见性上不起作用？

问题描述

我无法li:focus证明ul它在里面。

这是带有css属性的https://jsfiddle.net/cgxwzdy0/10/display

另一个具有visibility属性https://jsfiddle.net/cgxwzdy0/12/。

<div id="menu">
  <ul>
    <li>
      <a href="javascript: void(0)">
      Lalalalal
      </a>
      <ul>
        <li>
          <a href="javascript: void(0)"><span>Link 1</span></a>
          <a href="javascript: void(0)"><span>Link 2</span></a>
          <a href="javascript: void(0)"><span>Link 3</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS：

#menu ul li > ul {
  display: none;
}
#menu ul li li:focus > ul {
  display: block !important;
}

或具有可见性：

CSS

#menu ul li > ul {
  visibility: hidden;
}
#menu ul li li:focus > ul {
  visibility: visible !important;
}

请不要使用javascript解决方案。如果这在 css 中是不可能的，请你解释一下为什么？

当我打开开发人员工具并选择：显示焦点菜单时。看一下图像。

在此处输入图像描述

标签： htmlcss

解决方案

为了能够聚焦元素，您需要考虑tabindex属性，但内部元素还有另一个问题a会阻止聚焦效果。

这是一个示例，您可以在单击文本外部而不是单击文本时进行聚焦：

#menu ul li > ul {
  display: none;
}
#menu ul > li {
  border:1px solid;
  padding:10px;
}
#menu ul li:focus > ul {
  display: block;
}
<div id="menu">
  <ul>
    <li tabindex="-1">
      <a href="javascript: void(0)">
      Lalalalal
      </a>
      <ul>
        <li>
          <a href="javascript: void(0)"><span>Link 1</span></a>
          <a href="javascript: void(0)"><span>Link 2</span></a>
          <a href="javascript: void(0)"><span>Link 3</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

tabindex 全局属性指示它的元素是否可以聚焦，以及它是否/在哪里参与顺序键盘导航（通常使用 Tab 键，因此得名）。参考

要使其与a元素一起使用，您可以考虑:target

#menu ul li > ul {
  display: none;
}
#menu ul > li {
  border:1px solid;
  padding:10px;
}
#menu ul li #sub-menu:target {
  display: block;
}
<div id="menu">
  <ul>
    <li>
      <a href="#sub-menu">
      Lalalalal
      </a>
      <ul id="sub-menu">
        <li>
          <a href="javascript: void(0)"><span>Link 1</span></a>
          <a href="javascript: void(0)"><span>Link 2</span></a>
          <a href="javascript: void(0)"><span>Link 3</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

:target CSS 伪类表示一个唯一元素（目标元素），其 id 与 URL 的片段匹配。参考

推荐阅读