Tailwind实现的focus-within下拉菜单在iPhone端无法打开如何解决

该问题由iOS端WebKit内核的默认行为差异导致——iOS上所有第三方浏览器包括Chrome、Edge都使用系统自带的WebKit内核，不存在独立内核，两个用来触发菜单的CSS选择器会全部失效：

• group-focus-within:visible 失效：桌面端点击<button>时按钮会自动获得焦点，父元素的:focus-within可正常匹配；但iOS WebKit默认点击type="button"的按钮不会将焦点分配给按钮，父元素无法感知到焦点状态，该样式规则完全不触发。
• group-active:visible 失效：iOS下仅<a>、按钮、表单输入类原生可交互元素默认响应:active状态，代码中绑定group-active的外层<div>是普通块级元素，本身不会被匹配:active状态；且即使是可交互元素，iOS也要求元素绑定触摸相关事件监听器才会正常触发:active，代码中无相关绑定，该规则同样不生效。

不需要复杂的交互脚本，仅需少量调整即可兼容全端：

• 给按钮添加点击时主动聚焦的逻辑，强制点击后按钮获得焦点，触发父级:focus-within
• 移除冗余的group-active:visible类，:focus-within本身就支持点击按钮展开、点击页面其他区域失焦自动收起的交互，不需要依赖存续时间极短的:active状态
• 菜单项点击逻辑执行完成后，主动移除当前焦点即可自动收起菜单，符合常规交互预期
• （可选兼容）若需要适配iOS 10及更早版本，可加一行全局空触摸监听，让全站点:active状态正常触发

修复后完整代码：

<!-- 可选兼容脚本，仅适配老版本iOS，放在页面任意位置即可 -->
<script>
document.addEventListener('touchstart', () => {}, { passive: true })
</script>

<div class="group relative inline-block p-3 ml-7">
  <!-- 新增onclick逻辑主动聚焦按钮 -->
  <button type="button" onclick="this.focus()" class="border-neutral-600 border px-1 rounded-md">...</button>

  <!-- 移除冗余的group-active:visible规则 -->
  <div class="absolute left-0 top-10 flex flex-col rounded-md border border-neutral-500 bg-neutral-100 px-2 py-1 invisible group-focus-within:visible">
    <div class="cursor-pointer hover:underline" onclick="/* 你的业务逻辑 */ document.activeElement.blur()">Do amazing stuff</div>
    <div class="cursor-pointer hover:underline" onclick="/* 你的业务逻辑 */ document.activeElement.blur()">Go back</div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Alamakanambra