如何使用 React 和 Tailwind 隔离响应式移动菜单的可点击区域

Question

import React, { useState } from 'react'
import { NavLink } from 'react-router-dom'
import { RxHamburgerMenu } from "react-icons/rx";
import { FaTimes } from "react-icons/fa";
import Logo from '../assets/Logo.svg';

function Navbar() {
  //  nav is starting off false
  const [nav, setNav] = useState(false)
  // so when user clicks Hamburger buttom, it gomes from false(!nav) to true(nav)
  const handleClick = () => setNav(!nav)

  return (
    <header data-aos="fade" data-aos-duration="300" className="bg-white dark:bg-gray-900 relative shadow-lg " >
    <nav>
      <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
        <NavLink to="/" className="flex items-center space-x-3 rtl:space-x-reverse"><img src={Logo} alt="" width="200" className='h-15'/></NavLink>
        <div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse relative">
          <NavLink to="/contact/"><button type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Contact Us</button></NavLink>
       
              {/* Hamburger or Close Icon */}
          </div>
          <div className='md:hidden z-10' onClick={handleClick}>
            { nav ? <FaTimes size={25} color='white'/> : <RxHamburgerMenu size ={25}/>}
            <ul className={`${
              nav 
              ? 'text-white opacity-100 transform translate-x-0'
              : 'opacity-0 transform -translate-y-full'} transition-transform absolute top-20 w-full h-screen left-0 bg-zinc-800/80 flex flex-col justify-center items-center text-2xl
              `}>
              <NavLink to='/'><li className='p-2 hover:text-blue-500'>Home</li></NavLink>
              <NavLink to='/services'><li className='p-2 hover:text-blue-500'>Services</li></NavLink>
              <NavLink to='/solutions'><li className='p-2 hover:text-blue-500'>Solutions</li></NavLink>
              <NavLink to='/about'><li className='p-2 hover:text-blue-500'>About Us</li></NavLink>
              <NavLink to='/demos'><li className='p-2 hover:text-blue-500'>Demos</li></NavLink>              
              <NavLink to='/contact'><li className='p-2 hover:text-blue-500'>Contact Us</li></NavLink>
            </ul>
          </div>
            
        <div className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-sticky">
          <ul className="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
          <li>
            <NavLink to="/" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Home</NavLink>
          </li>
          <li>
            <NavLink to="/services" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</NavLink>
          </li>
          <li>
            <NavLink to="/solutions" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Solutions</NavLink>
          </li>
          <li>
            <NavLink to="/about" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About Us</NavLink>
          </li>
          <li>
            <NavLink to="/demos" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Demos</NavLink>
          </li>
          </ul>
        </div>
  
      </div>
    
    </nav>
    </header>
    


  )
}

export default Navbar

我正在尝试制作一个响应式导航栏，当移动菜单显示整个导航栏仍然可以单击来切换菜单，但只能使用 x 按钮关闭它。 尝试使菜单仅在单击汉堡菜单按钮时打开。

我尝试添加隐藏按钮和空白 div，但整个导航栏仍然能够切换菜单。

Answer 1

我认为你应该尝试这个：

<div className="md:hidden z-10">
    <button
        onClick={handleClick} 
        className="focus:outline-none"
        aria-label={nav ? "Close Menu" : "Open Menu"}
    >
        {nav ? <FaTimes size={25} color='white' /> : <RxHamburgerMenu size={25} />}
    </button>
</div>

否则，您可以微调 ul 菜单：

useEffect(() => {
    const closeMenu = (e) => {
        if (!e.target.closest('nav') && nav) {
            setNav(false);
        }
    };
    document.addEventListener('click', closeMenu);
    return () => document.removeEventListener('click', closeMenu);
}, [nav]);

通过这种方法，菜单仅在单击按钮时才会切换，并且意外单击导航栏的其他部分将不再触发它。