移动端下拉菜单中Work项的二级交互实现求助

问题分析 #

当前桌面端通过onMouseEnter/onMouseLeave实现了Work项悬停下拉，但移动端缺少点击触发下拉的逻辑，且下拉菜单定位不适配移动端布局，导致点击Work后直接跳转页面，无法展开子菜单。

解决步骤 #

1. 调整NavBar2组件逻辑，添加移动端点击触发下拉 #

修改NavBar2中的Work项，增加点击事件切换下拉状态，同时阻止移动端点击时的页面跳转：

// NAVBAR2 修改后的 JSX
import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import DropDown from './DropDown'
import './NavBar2.css' 

export default function NavBar2() {
  const [click, setClick] = useState(false)
  const [dropdown, setDropdown] = useState(false)
  const [isMobile, setIsMobile] = useState(window.innerWidth < 960)

  const handleClick = () => setClick(!click)
  const closeMobileMenu = () => setClick(false)

  // 监听窗口大小变化，更新移动端状态
  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 960)
      // 窗口变大时自动关闭下拉
      if (window.innerWidth >= 960) {
        setDropdown(false)
      }
    }
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  const handleWorkClick = (e) => {
    if (isMobile) {
      // 移动端点击时阻止跳转，切换下拉状态
      e.preventDefault()
      setDropdown(!dropdown)
    } else {
      // 桌面端正常跳转并关闭菜单
      closeMobileMenu()
    }
  }

  const onMouseEnter = () => {
    if (!isMobile) {
      setDropdown(true)
    }
  }

  const onMouseLeave = () => {
    if (!isMobile) {
      setDropdown(false)
    }
  }

  return (
    <>
      <nav className='navbar'>
        <div className='logoBox'>
          <Link to='/' className='navbar-logo'>Chris Blossom Media</Link>
        </div>
        <div className='menu-icon' onClick={handleClick}>
          <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
        </div>
        <ul className={click ? 'nav-menu active' : 'nav-menu'}>
          <li className='nav-item'>
            <Link to='/services' className='nav-links' onClick={closeMobileMenu}>Services</Link>
          </li>
          <li 
            className='nav-item' 
            onMouseEnter={onMouseEnter} 
            onMouseLeave={onMouseLeave}
          >
            <Link 
              to='/work' 
              className='nav-links' 
              onClick={handleWorkClick}
            >
              Work <i className='fas fa-caret-down'/>
            </Link>
            {dropdown && <DropDown isMobile={isMobile} />}
          </li>
          <li className='nav-item'>
            <Link to='/reviews' className='nav-links' onClick={closeMobileMenu}>Reviews</Link>
          </li>
          <li className='nav-item'>
            <Link to='/about' className='nav-links' onClick={closeMobileMenu}>About</Link>
          </li>
          <li className='nav-item'>
            <Link to='/contact' className='nav-links' onClick={closeMobileMenu}>Contact</Link>
          </li>
        </ul>
      </nav>
    </>
  )
}

2. 修改Dropdown组件，适配移动端布局 #

给Dropdown传入isMobile属性，调整菜单的渲染逻辑：

// DROPDOWN 修改后的 JSX
import { Link } from 'react-router-dom'
import { MenuItems } from './MenuItems'
import './DropDown.css' 

export default function DropDown({ isMobile }) {
  const closeMobileNav = () => {
    if (isMobile) {
      // 点击子项后关闭移动端导航菜单
      document.querySelector('.menu-icon')?.click()
    }
  }

  return (
    <>
      <ul className={`dropdown-menu ${isMobile ? 'mobile-dropdown' : ''}`}>
        {MenuItems.map((item, index) => {
          return (
            <li key={index}>
              <Link 
                className={item.cName} 
                to={item.path} 
                onClick={closeMobileNav}
              >
                {item.title}
              </Link>
            </li>
          )
        })}
      </ul>
    </>
  )
}

3. 更新CSS，适配移动端下拉菜单样式 #

修改DropDown.css，添加移动端专属样式：

/* DROPDOWN 修改后的 CSS */
.dropdown-menu {
  width: 200px;
  position: absolute;
  top: 80px;
  right: 260px;
  list-style: none;
  text-align: start;
  z-index: 100;
}

/* 移动端下拉菜单样式 */
.dropdown-menu.mobile-dropdown {
  position: static;
  width: 100%;
  background: #242222;
  padding-left: 0;
}

.dropdown-menu li {
  background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
  cursor: pointer;
}

.dropdown-menu.mobile-dropdown li {
  background: #242222;
}

.dropdown-menu li:hover {
  background: rgb(173, 173, 173);
}

.dropdown-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: white;
  padding: 16px;
}

.dropdown-menu.mobile-dropdown .dropdown-link {
  padding: 1.5rem;
  text-align: center;
}

同时在NavBar2.css的移动端媒体查询中，给.nav-item添加相对定位：

@media screen and (max-width: 960px) {
  /* ... 保留原有代码 ... */
  .nav-item {
    display: flex;
    align-items: center;
    height: auto;
    position: relative;
    padding: 0;
  }
  /* ... 保留原有代码 ... */
}

核心改进点 #

• 新增窗口大小监听，自动识别移动端/桌面端状态
• 移动端点击Work项时阻止默认跳转，切换下拉菜单显示状态
• 调整移动端下拉菜单定位为静态，适配垂直导航布局
• 点击下拉子项时自动关闭移动端导航菜单，优化用户体验

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