javascript - 在焦点上显示和隐藏不同的元素

Question

我一直在研究一些显示和隐藏 HTML 元素的方法，最后我找到了 this .

我的意图是使用一种无​​需使用 JavaScript、JQuery 或除 CSS 和 HTML 之外的任何其他东西来显示和隐藏元素的方法，因此我选择使用属性“tabindex”，然后我创建了以下简单的研究案例...

HTML:

<div id="root" tabindex="1">
    <div>DIV A</div>
    <a class="hidden" href="http://www.google.com">LINK</a>
    <div class="hidden">DIV B</div>
    <input class="hidden" type="submit" value="input"/>
</div>

CSS:

.hidden
{
    color: red;
    display: none;
}

#root:FOCUS .hidden
{
    display: block;
}

根据代码看，里面的div可以很方便的点击选中。但是，不幸的是，无法单击或选择链接和按钮。在尝试这样做时，根 div 的焦点丢失了。

我的问题很简单。有没有一种或不同的方法可以在不使用 JavaScript 或 JQuery 或其他东西的情况下绕过/解决这个问题？ (仅限 CSS 和 HTML)

如果不清楚，我的意图是隐藏元素，以便在显示它们时可以使用它们。我想创建一个包含子菜单的菜单，并且子菜单仅在单击其父菜单时出现(而不是在鼠标经过它们时出现)。

啊!我不得不提......我还找到了一个使用复选框的解决方案。不幸的是，这是不可行的，因为我不必再次单击该元素就可以隐藏它。也就是说，我只想单击元素外部使其隐藏其内部元素，因此我选择了“tabindex”。

提前感谢您的关注和耐心。

Answer 1

您还应该将 FOCUS 添加到隐藏类，这样在选择它们时焦点就不会丢失。

#root:FOCUS .hidden,
.hidden:FOCUS
{
    display: block;
}