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;
}

Answer 2

代码中的问题是，无论何时单击隐藏的类子元素，父元素都会失去焦点。因此，css样式应用于默认值，即隐藏具有隐藏类的子元素。

我认为这可以使用javascript解决。

function focusRoot(e) {
    e.currentTarget.parentElement.focus();
    return;
}
var root = document.getElementById('root');
var cs = root.children;
for (var i = 0; i < cs.length; i++) {
    var c = cs[i];
    c.onfocus = focusRoot;
}

<强> Working fiddle

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

2 个答案: