【发布时间】：2021-03-04 15:05:58
【问题描述】：
我有一个使用 :focus-within 伪类实现的两级导航菜单。在小型设备上，它应该显示为屏幕底部的“菜单”按钮，点击时会扩展到第一级。第二级应该在点击第一级项目时打开，第一级应该（当然）保持打开状态。这在 Android 手机上运行良好，但我的 iPhone 用户报告菜单按钮对点击没有响应。
这是 HTML sn-p：
<div class="gcc-expands" id="GCCmainNav">
<a href="#" id="GCCnavOpen">☰ Menu</a>
<div class="gcc-expansion">
<nav role="navigation"class="gcc-menu">
<a href="/">Home</a>
<a href="/#GCCprogramme">Concerts & Events</a>
<div class="gcc-expands">
<a href="#">About Us</a>
<div class="gcc-expansion">
<div class="gcc-menu" id="GCCaboutNav">
<a href="/about-us.php">The Choir</a>
<a href="/#GCCrecordings">The Choir on CD</a>
<a href="/history.php">History</a>
<a href="/contact-us.php#GCCcontact">Contact</a>
</div>
</div>
</div>
<a href="/for-members/members1.php">For Members</a>
</nav>
</div>
</div>
这是 CSS：
.gcc-expands {
position: relative;
}
.gcc-expansion {
display: none;
position: relative;
}
.gcc-expands:focus-within>.gcc-expansion {
display: block;
}
关注#GCCnavOpen 伪链接应该会导致显示第一级 .gcc-expansion，然后关注“关于我们”链接应该保持第一级打开 (:focus-within) 并打开内部 .gcc-展开。
根据 caniuse 的说法，自 10.3（2017 年）以来，iOS Safari 已支持此功能，但它似乎不适用于我的用户。请问有什么见解吗？
【问题讨论】：
-
你能把处理你提到的这些点击事件的JS贴出来吗？
-
马里奥，感谢您的回复。这里不涉及js。这段代码的目的是在纯 CSS 中实现一个两级弹出菜单。 :focus-within 伪类使这项工作在 Windows 和 Android 环境中工作，因为它使 CSS 能够在父级或子级获得焦点时将
display: block（或其他）应用于父级。在这方面，它是一个独特的 CSS 功能——没有其他选择器允许您根据孩子的状态来设置父母的样式。我很高兴地说我现在已经解决了这个问题，我会对此发表新的评论。