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

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

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

HTML:

如果按照代码查看，可以轻松单击和选择内部div。但是，很遗憾，无法单击或选择链接和按钮。在尝试这样做时，根div的焦点丢失

我的问题很简单。有没有一种或几种方法可以绕过/解决这个问题，而不必使用JavaScript或JQuery之类的工具？（仅限CSS和HTML）

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

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

---

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

您还应该将焦点添加到隐藏类中，以便在选择这些类时不会丢失焦点

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

---

代码中的问题是，无论何时单击隐藏的类子元素，父元素都会失去焦点。因此，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;
}

函数焦点根（e）{
e、 currentTarget.parentElement.focus（）；
返回；
}
var root=document.getElementById（'root'）；
var cs=root.children；
对于（变量i=0；i

---

你好，Jason W，谢谢你的回复！我试着按你说的去做，但不幸的是没有成功。你还有别的想法吗？任何人都将受到欢迎。再次感谢。我看到答案修复了链接，但该按钮只有在您再次单击它后才起作用，因为其他元素由于单击按钮而失去焦点而返回到隐藏状态。我会看看我能做些什么。如果没有javascript，我无法让它对点击做出响应，并且当按钮不是第一个元素时仍然可以工作。您可以将css更改为

#root:hover.hidden

，以便将鼠标悬停在整个#root容器上，并且由于容器大小的扩展，焦点不会丢失，容器中的所有功能都可以按预期工作。但是，这可能不符合您的业务需求，因为您被绑定到悬停而不是焦点，以模拟onclick样式的事件。我认为您和_Green先生是对的。如果不使用JavaScript，可能无法做到这一点。感谢您的关注和耐心。

指针事件：在您的情况下，没有任何

会起作用，但您将无法单击内部元素。你好，格林先生。谢谢你的回答！正如我在前面的问题中所说，使用复选框是不可行的，因为用户必须再次单击菜单（DIV a）（而不是在其外部）才能隐藏其内容。此外，我还说我不能使用JavaScript（而您的示例似乎不起作用）。我感谢你的帮助，如果你想点别的，我会很感激的。谢谢。@Loa只能使用javascript。如果你改变主意加入javascript，请告诉我上面的代码中到底有什么不起作用。我认为你和Jason W是对的。如果不使用JavaScript，可能无法做到这一点。我感谢您的关注和耐心。@Loa有一种方法，正如我在中提到的，但不会让您单击该容器中的链接或按钮。

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

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