小编Cha*_*lie的帖子

我有一个使用 :focus-within 伪类实现的两级导航菜单。在小型设备上，它应显示为屏幕底部的“菜单”按钮，点击后会展开到第一级。第二级应该在点击第一级项目时打开，并且第一级应该（当然）保持打开状态。这在 Android 手机上运行良好，但我的 iPhone 用户报告菜单按钮对点击没有响应。

这是 HTML 片段：

<div class="gcc-expands" id="GCCmainNav">
    <a href="#" id="GCCnavOpen">&#9776; Menu</a>
    <div class="gcc-expansion">
        <nav role="navigation"class="gcc-menu">
            <a href="/">Home</a>
            <a href="/#GCCprogramme">Concerts&nbsp;&amp;&nbsp;Events</a>
            <div class="gcc-expands">
                <a href="#">About&nbsp;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&nbsp;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-expansion。 …