Tailwind + Headless UI 移动端菜单点击后无法自动关闭如何解决？

1. 先获取Disclosure内置的close方法 #

Headless UI的Disclosure组件会向render props注入close方法，你之前调用close()失效是因为没有从参数中解构出该方法，首先修改参数：

// 修改前
{({ open }) => (
// 修改后
{({ open, close }) => (

2. 实现点击菜单项自动关闭 #

有两种可行方案，选一种即可：

方案A：手动绑定点击事件（更灵活） #

给所有移动端菜单项绑定onClick={close}，注意自定义的NavLinkMobile组件需要透传onClick属性到内部的可点击元素上：

<Disclosure.Panel className="lg:hidden">
  <div className="pt-2 pb-3 space-y-1">
    {navLinks.map((link) => (
      <NavLinkMobile
        key={link.id}
        href={link.href}
        onClick={close}
      >
        {link.name}
      </NavLinkMobile>
    ))}
    <NavLinkMobile 
      href="/list-project"
      onClick={close}
    >
      List your Project
    </NavLinkMobile>
  </div>
</Disclosure.Panel>

方案B：用Disclosure.Button包裹菜单项（内置逻辑） #

Disclosure.Button默认点击会切换Disclosure的开闭状态，你已经给导航链接用了这个写法，只需要把「List your Project」也用它包裹即可：

<Disclosure.Button
  as={NavLinkMobile}
  href="/list-project"
>
  List your Project
</Disclosure.Button>

3. 实现点击菜单外空白区域自动关闭 #

Disclosure默认不支持点击外部关闭，需要手动添加全局点击监听逻辑：
首先给Disclosure组件绑定ref：

// 组件顶部引入对应Hook并声明ref
import { useRef, useEffect } from 'react'

const disclosureRef = useRef(null)

<Disclosure
  as="nav"
  ref={disclosureRef}
  className="fixed top-0 left-0 right-0 z-10 w-full bg-white shadow"
>

然后添加useEffect监听全局点击事件：

useEffect(() => {
  const handleClickOutside = (e) => {
    // 仅菜单打开时触发判断
    if (open && disclosureRef.current && !disclosureRef.current.contains(e.target)) {
      close()
    }
  }
  document.addEventListener('mousedown', handleClickOutside)
  return () => document.removeEventListener('mousedown', handleClickOutside)
}, [open, close])

内容的提问来源于stack exchange，提问作者Harsha M V