單擊導航鏈接時，下一個 js 不會關閉移動導航

Question

我正在使用帶有 Tailwind CSS 的 Next Js 來創建網站。 使用 Javascript 切換移動設備的菜單。 但是 Next Js 單擊導航菜單鏈接不會關閉打開的導航。

按鈕-

          const Navbar = () => {
          const [ isHidden, setIsHidden ] = useState(true)
          return (
            <>
                    <button onClick={() => setIsHidden(c => !c)} className="menu-button md:hidden rounded-lg focus:outline-none focus:shadow-outline">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path strokeLinecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
  <path className="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
    <nav className={`mobile-menu flex-col flex-grow pb-4 md:pb-0 md:flex md:justify-end md:flex-row flex hidden ${isHidden ? "hidden" : ""}`}>
        <Link href="/about">
          <a className="md:mt-0 mt-3 px-3 py-2">About</a>
        </Link>
        <Link href="/about-us">
          <a className="md:mt-0 mt-3 px-3 py-2">Boost</a>
        </Link>
        <Link href="/about-us">  
          <a className="md:mt-0 mt-3 px-3 py-2">Technology</a>
        </Link>
        <Link href="/about-us">  
          <a className="md:mt-0 mt-3 px-3 py-2">Contact</a>
        </Link>
      </nav>
    
                </>
          )
        }
    
    export default Navbar

使用下面的 Javascript 切換菜單。

    const btn = document.querySelector('button.menu-button');
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
  menu.classList.toggle("hidden");
})

Answer 1

可能是您的事件偵聽器被創建了多次（我們看不到整個代碼）。 更多類似 React 的方法可能如下所示：

const Home = () => {
    const [ isHidden, setIsHidden ] = useState(true)

    return (
        <button onClick={() => setIsHidden(c => !c)}>click me</button>
   
        <nav className={`your classes ${isHidden ? "hidden" : ""}`}>
           ...
        </nav>
    )
}

因此，您有一個 state 並基於該 state 您正在添加“隱藏” class。 Button 有一個 onclick 處理程序，用於切換 state。

如果您還想在鏈接單擊時關閉導航欄，您可以嘗試以下方法：

<Link href="/about">
    <a
      onClick={(e) => {
          e.preventDefault()
          setIsHidden(true)
      }    
    >About</a>
</Link>