focus-within 适用于 Android 浏览器，但不适用于 iOS

Posted 2023-02-23

【中文标题】focus-within 适用于 Android 浏览器，但不适用于 iOS

【英文标题】：focus-within works on Android browser but not iOS

【发布时间】：2021-03-04 15:05:58

【问题描述】：

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

这是 html sn-p：

<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-展开。

根据 caniuse 的说法，自 10.3（2017 年）以来，ios Safari 已支持此功能，但它似乎不适用于我的用户。请问有什么见解吗？

【问题讨论】：

你能把处理你提到的这些点击事件的JS贴出来吗？

马里奥，感谢您的回复。这里不涉及js。这段代码的目的是在纯 CSS 中实现一个两级弹出菜单。 :focus-within 伪类使这项工作在 Windows 和 Android 环境中工作，因为它使 CSS 能够在父级或子级获得焦点时将display: block（或其他）应用于父级。在这方面，它是一个独特的 CSS 功能——没有其他选择器允许您根据孩子的状态来设置父母的样式。我很高兴地说我现在已经解决了这个问题，我会对此发表新的评论。

【参考方案1】：

我已经破解了这个。

我猜想，由于某种原因，元素在被点击时没有获得焦点。因此，点击我的“菜单”链接并没有赋予该元素焦点，因此 :focus-within 无法在父级中操作。这似乎是 iOS 在纯触摸界面上的“功能”；在 Windows 或 Andoid 环境（或 MacOS）中这不是问题。

我发现解决方法是将显式tabindex="0" 添加到菜单层次结构中的每个链接（包括充当按钮的伪链接）。这似乎使元素在 iOS 触摸界面中成为焦点。

为了清楚起见，这里是工作的 HTML（CSS 没有变化）：

<div class="gcc-expands" id="GCCmainNav">
    <a href="#" tabindex="0" id="GCCnavOpen">&#9776; Menu</a>
    <div class="gcc-expansion">
        <nav role="navigation"class="gcc-menu">
            <a href="/" tabindex="0">Home</a>
            <a href="/#GCCprogramme" tabindex="0">Concerts&nbsp;&amp;&nbsp;Events</a>
            <div class="gcc-expands">
                <a href="#" tabindex="0">About&nbsp;Us</a>
                <div class="gcc-expansion">
                    <div class="gcc-menu" id="GCCaboutNav">
                        <a href="/about-us.php" tabindex="0">The Choir</a>
                        <a href="/#GCCrecordings" tabindex="0">The Choir on CD</a>
                        <a href="/history.php" tabindex="0">History</a>
                        <a href="/contact-us.php#GCCcontact" tabindex="0">Contact</a>
                    </div>
                </div>
            </div>
            <a href="/for-members/members1.php" tabindex="0">For&nbsp;Members</a>
        </nav>
    </div>
</div>

当然，还有一堆辅助 CSS 用于定位和设置两级菜单的样式。我没有在这里发布它，因为它是特定于设计的，与问题无关。

我希望这可以帮助其他一些挣扎的灵魂。

【讨论】：

感谢您的回答。自己有问题。我真的不明白为什么 Safari 会这样。默认情况下，带有href-Attribute 或<button> 元素的<a>-元素应该是可聚焦的。