谁可以帮助谁，
我遵循了有关如何将鼠标悬停在导航栏中的“工作”上时创建带有下拉菜单的导航栏的视频教程。我能够得到这一部分，但视频教程没有解释如果我在移动下拉菜单中单击“工作”，如何在移动视图中执行相同的操作，现在我很迷失。
任何人都可以帮助弄清楚我应该在代码中添加什么，以便能够将鼠标悬停在下拉列表中的“工作”上以查看映射的相同 li 吗？
（或者应该单击它，因为在使用 iPhone 查看网站上的常规下拉列表时无法悬停鼠标指针？）
NAVBAR2 JSX
// REACT:
import { useState } from 'react'
// ROUTER:
import { Link } from 'react-router-dom'
// COMPONENTS:
import DropDown from './DropDown'
//IMGS:
// import logoIcon from '../../imgs/CBMedia_White.png' -- netlify told you to get rid of es lint errors in order to deploy, buy you might need this. Keep that in mind
// CSS:
import './NavBar2.css'
// NAVBAR2:
export default function NavBar2() {
const [click, setClick] = useState(false)
const [dropdown, setDropdown] = useState(false)
const handleClick = () => setClick(!click)
const closeMobileMenu = () => setClick(false)
const onMouseEnter = () => {
if (window.innerWidth < 960) {
setDropdown(false)
} else {
setDropdown(true)
}
}
const onMouseLeave = () => {
if (window.innerWidth < 960) {
setDropdown(false)
} else {
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={closeMobileMenu }>Work <i className='fas fa-caret-down'/></Link>{dropdown && <DropDown />}</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 CSS
/* NAVBAR ----------------> */
.navbar {
background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
}
.logoBox {
width: 45%;
}
.navbar-logo {
color: #fff;
align-self: center;
margin-left: 20px;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
width: 400px;
}
.menu-icon {
display: none;
}
.mobileShow img {
width: 50px;
margin-top: 5px;
}
.fa-firstdraft {
margin-left: 0.5rem;
font-size: 1.6rem;
}
.nav-menu {
display: grid;
grid-template-columns: repeat(5, auto);
grid-gap: 10px;
list-style: none;
text-align: center;
width: 70vw;
justify-content: end;
margin-right: 2rem;
}
.nav-item {
display: flex;
align-items: center;
height: 80px;
}
.nav-links {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}
.nav-links:hover {
background: rgb(173, 173, 173);
border-radius: 4px;
transition: all 0.2s ease-out;
}
.fa-bars {
color: #fff;
}
.nav-links-mobile {
display: none;
}
@media screen and (max-width: 960px) {
.navbar {
justify-content: space-between;
}
.NavbarItems {
position: relative;
}
.nav-menu {
display: flex;
flex-direction: column;
width: 100%;
height: 60vh;
position: absolute;
top: 60px;
left: -180%;
opacity: 1;
transition: all 0.5s ease;
}
.nav-menu.active {
background: #242222;
left: 0;
opacity: 1;
transition: all 0.5s ease;
z-index: 1;
padding-left: 0px;
}
.nav-links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.nav-links:hover {
background: rgb(173, 173, 173);
border-radius: 0;
}
.logoBox {
width: 90%;
}
.navbar-logo {
/* position: absolute; */
top: 0;
left: -75px;
transform: translate(25%, 50%);
}
.menu-icon {
display: block;
position: absolute;
margin-top: 5px;
top: 0;
right: 0;
transform: translate(-100%, 60%);
font-size: 1.8rem;
cursor: pointer;
}
.fa-times {
color: #fff;
font-size: 2rem;
}
.nav-links-mobile {
display: block;
text-align: center;
padding: 1.5rem;
margin: 2rem auto;
border-radius: 4px;
width: 80%;
background: #1888ff;
text-decoration: none;
color: #fff;
font-size: 1.5rem;
}
.nav-links-mobile:hover {
background: #fff;
color: #1888ff;
transition: 250ms;
}
}
@media screen and (max-width: 420px) {
.navbar-logo {
font-size: 22px;
}
}
下拉 JSX
// REACT:
import { useState } from 'react'
// ROUTER:
import { Link } from 'react-router-dom'
// DATA:
import { MenuItems } from './MenuItems' // this deconstructs and finds the variable holding the data
// CSS:
import './DropDown.css'
export default function DropDown() {
const [click, setClick] = useState(false)
const handleClick = () => setClick(!click)
return (
<>
<ul onClick={handleClick} className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}>
{MenuItems.map((item, index) => {
return (
<li key={index}><Link className={item.cName} to={item.path} onClick={() => setClick(false)}>{item.title}</Link></li>
)
})}
</ul>
</>
)
}
下拉CSS
.dropdown-menu {
width: 200px;
position: absolute;
top: 80px;
right: 260px;
list-style: none;
text-align: start;
}
.dropdown-menu li {
background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
cursor: pointer;
}
.dropdown-menu li:hover {
background: rgb(173, 173, 173);
}
.dropdown-menu.clicked {
display: none;
}
.dropdown-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: white;
padding: 16px;
}
正如您所指出的，在移动设备上您不会有光标，因此您必须以不同的方式处理它。您可能希望它在单击时打开，并在第二次单击时再次关闭。可以使用 'useState' 来存储菜单当前是否打开。