我正在进行一些实验。我试图创建一个没有javascript使用的onclick菜单:focus。我遇到的问题是孙子,点击它仍然关闭了父母。我尝试使用〜选择器保持打开,但它不起作用,我不明白为什么。
<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;
}
codepen:http://codepen.io/anon/pen/iuhtn
答案 0 :(得分:1)
当您点击孙子时,焦点取自其祖父母。这导致:focus >
规则不再适用于祖父母。
~
选择器无法按照您使用它的方式工作,因为没有.onclick-show-content
元素跟随.onclick-item
个元素的兄弟。您拥有的结构似乎也不利于使用~
,因为它是基于父子的,而不是基于兄弟的。