css - 孙子:关注即使选择也无法保持 parent 开放

我正在进行一些实验。我正在尝试使用：focus创建不带JavaScript的onclick菜单。我遇到的问题是孙子，单击它仍然关闭了父项。我尝试使用〜选择器将其保持打开状态，但是它不起作用，我也不知道为什么。

<nav id="main-menu">
    <ul>
        <li><a href="">Menu 1</a></li>
        <li tabindex="0" class="onclick-item"><span>Menu 2</span>
            <ul class="onclick-show-content">
                <li><a href="#">Sub-Menu 1</a></li>
                <li tabindex="0" class="onclick-item"><span>Sub-Menu 2</span>
                    <ul class="onclick-show-content">
                                <li><a href="#">Sub-Sub-Menu 1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
    </ul>
</nav>

.onclick-item { outline: none; }
.onclick-item:focus {
        pointer-events: none;
            }
.onclick-item > .onclick-show-content {
        overflow: hidden;
        max-height: 0;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
}
.onclick-item:focus > .onclick-show-content, .onclick-item:focus ~ .onclick-show-content {
        max-height: 540px;
        pointer-events: auto;
}

密码笔：http://codepen.io/anon/pen/iuhtn

最佳答案

单击孙子时，焦点将从其祖父母那里移开。这导致:focus >规则不再适用于祖父母。

~选择器无法按您使用它的方式工作，因为在.onclick-show-content元素的同级之后没有.onclick-item元素。您使用的结构似乎也不利于使用~，因为它是基于父子而不是基于兄弟的。

关于css - 孙子:关注即使选择也无法保持 parent 开放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25819343/