我有一个用 :focus-within 伪类实现的两级导航菜单.在小型设备上，它应该显示为屏幕底部的菜单"按钮，点击时会扩展到第一级.第二级应该在点击第一级项目时打开，而第一级应该(当然)保持打开状态.这在 Android 手机上运行良好，但我的 iPhone 用户报告说菜单按钮没有响应点击.
这是 HTML 片段:
<a href="/for-members/members1.php">For<Members</a></nav>
这是 CSS:
.gcc-expands {位置:相对；}.gcc 扩展 {显示:无；位置:相对；}.gcc-expands:focus-within>.gcc-expansion {显示:块；}关注#GCCnavOpen 伪链接应该会导致显示第一级 .gcc-expansion，然后关注关于我们"链接应该保持第一级打开 (:focus-within) 并打开内部 .gcc-扩展.
根据 caniuse 的说法，iOS Safari 自 10.3(2017)起就支持此功能，但它似乎不适用于我的用户.请问有什么见解吗?
我已经破解了这个问题.
我猜想，出于某种原因，元素在点击时没有获得焦点.因此，点击我的菜单"链接并没有赋予该元素焦点，因此 :focus-within 无法在父级中运行.这似乎是 iOS 在纯触控界面上的一个功能"；这在 Windows 或 Andoid 环境(或 MacOS)中不是问题.
我发现解决方法是向菜单层次结构中的每个链接(包括充当按钮的伪链接)添加显式 tabindex=0".这似乎使元素在 iOS 触摸界面中可聚焦.
为了清楚起见，这里是可用的 HTML(没有更改 CSS):
<a href="/for-members/members1.php";tabindex=0">对于 成员</a></nav>
当然，还有一堆辅助 CSS 来定位和设置两级菜单的样式.我没有在这里发布它，因为它是特定于设计的，与问题无关.
我希望这能帮助其他一些挣扎的灵魂.
I have a two-level navigation menu implemented with the :focus-within pseudo class. On small devices it should appear as a 'Menu' button at the bottom of the screen, which expands to the first level on tapping. The second level should open on tapping a first-level item and the first level should (of course) remain open. This works fine on Android phones but my iPhone users report that the Menu button does not respond to tapping.
Here's the HTML snippet:
<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>
And here's the CSS:
.gcc-expands {
position: relative;
}
.gcc-expansion {
display: none;
position: relative;
}
.gcc-expands:focus-within>.gcc-expansion {
display: block;
}
Focussing on the #GCCnavOpen pseudo link should cause the first level .gcc-expansion to display, then focussing on the 'About Us' link should keep the first level open (:focus-within) and open the inner .gcc-expansion.
According to caniuse, this has been supported in iOS Safari since 10.3 (2017) but it doesn't seem to be working for my users. Any insights, please?
I've cracked this.
I guessed that, for some reason, the elements were not acquiring focus when tapped on. So tapping on my 'Menu' link did not give that element focus, therefore :focus-within couldn't operate in the parent. This seems to be a 'feature' of iOS on touch-only interfaces; it's not a problem in Windows or Andoid environments (or on MacOS).
I discovered that the cure is to add explicit tabindex="0" to every link in the menu hierarchy (including the pseudo links that act as buttons). This seems to make the element focussable in the iOS touch interface.
For clarity, here's the working HTML (no change to the CSS):
<div class="gcc-expands" id="GCCmainNav">
<a href="#" tabindex="0" id="GCCnavOpen">☰ Menu</a>
<div class="gcc-expansion">
<nav role="navigation"class="gcc-menu">
<a href="/" tabindex="0">Home</a>
<a href="/#GCCprogramme" tabindex="0">Concerts & Events</a>
<div class="gcc-expands">
<a href="#" tabindex="0">About 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 Members</a>
</nav>
</div>
</div>
Of course, there's a bunch of ancillary CSS that positions and styles the two levels of menu. I haven't posted that here because it's design-specific and not relevant to the problem.
I hope this helps some other struggling soul.
这篇关于focus-within 适用于 Android 浏览器，但不适用于 iOS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
