TailwindCSS实现的下拉菜单在IOS设备点击无响应问题求助

问题根因 #

该问题是IOS Safari（含IOS端Chrome，因为其内核也是Webkit）的经典兼容性问题：

• 默认情况下，IOS Webkit内核不会将点击非交互元素（无显式可点击属性的元素）的事件向上冒泡触发父元素的:focus/:focus-within状态
• 你当前的实现依赖.dropdown父容器的:focus-within伪类触发下拉显示，但你没有给.dropdown元素设置可聚焦属性，IOS点击后无法触发对应状态，因此下拉无响应。

可行修复方案 #

以下方案按实现成本从低到高排序，均可解决问题：

方案1：纯CSS修复（改动最小） #

仅需修改两处代码即可：

1. 给.dropdown容器添加tabindex="0"属性和鼠标指针样式，让其可以被聚焦：

<div class=" relative inline-block text-left dropdown" tabindex="0" style="cursor: pointer;">

2. 扩展你的下拉触发CSS规则，同时匹配:active状态适配IOS点击的临时触发逻辑：

<style>
  .dropdown:focus-within .dropdown-menu,
  .dropdown:active .dropdown-menu {
    opacity:1;
    transform: translate(0) scale(1);
    visibility: visible;
  }
</style>

方案2：加1行JS修复（稳定性更高） #

给下拉触发按钮添加空的onclick属性，IOS会将带有显式onclick属性的元素判定为可交互元素，正常触发focus状态冒泡：

<button onclick="void(0)" class="inline-flex justify-center items-center w-full px-4 py-2 text-sm font-medium leading-5 text-psb transition duration-150 ease-in-out bg-white hover:text-psb-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-psb-50 active:text-psb-800"
 type="button" aria-haspopup="true" aria-expanded="true" aria-controls="headlessui-menu-items-117">

方案3：JS切换类实现（兼容性最好，无伪类依赖） #

如果需要更稳定的交互逻辑（比如点击外部自动关闭下拉），可以放弃:focus-within的实现，改用JS切换类控制下拉显示：

1. 修改CSS触发规则：

<style>
  .dropdown.active .dropdown-menu {
    opacity:1;
    transform: translate(0) scale(1);
    visibility: visible;
  }
</style>

2. 加一段极简JS逻辑：

document.querySelectorAll('.dropdown').forEach(dropdown => {
  // 点击按钮切换下拉
  dropdown.querySelector('button').addEventListener('click', () => {
    dropdown.classList.toggle('active')
  })
  // 点击页面其他区域关闭下拉
  document.addEventListener('click', e => {
    if (!dropdown.contains(e.target)) dropdown.classList.remove('active')
  })
})

额外优化提示 #

你的代码中下拉菜单项使用了<p>标签加href属性，属于不规范写法：href是<a>标签的专属属性，你可以保留现有结构，直接删除<p>标签上的href即可，不影响功能。

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