我缩短了代码,但逻辑是一样的。
问题在于:
当我将鼠标悬停在“主页”上时,“服务”的状态也会激活,并且它们都会打开下拉菜单。我只想这样:当我将鼠标悬停在“主页”上时,会出现“链接一”和“链接二”,当我将鼠标悬停在“服务”上时,会出现“链接三”和“链接四”... 现在,当我将鼠标悬停在“服务”上时,“家”的状态会以相同的方式同时更改。并且它们的两个下拉菜单同时出现...
你有什么想法吗?
为了更清晰,我应该创建 fiddle 还是 codepen 示例?
const Header = () => {
const [menuHoverActive, setMenuHoverActive] = useState(false)
const handleHoverOnMouseEnter = () => {
setMenuHoverActive(true)
}
const handleHoverOnMouseLeave = () => {
setMenuHoverActive(false)
}
return (
<nav className="">
<ul className="xl:inline-flex xl:flex-row xl:ml-auto xl:w-auto w-full xl:items-center items-start flex flex-col xl:h-auto">
<li className="relative">
<Link
onMouseEnter={handleHoverOnMouseEnter}
onMouseLeave={handleHoverOnMouseLeave}
className=""
to="/"
>
Home
</Link>
{menuHoverActive ? (
<ul className="flex bg-gray-700 flex-col xl:absolute xl:top-10">
<li className="">
<Link className="" to="/">
Link One
</Link>
</li>
<li className="">
<Link className="" to="/">
Link Two
</Link>
</li>
</ul>
) : (
''
)}
</li>
<li className="relative">
<Link
onMouseEnter={handleHoverOnMouseEnter}
onMouseLeave={handleHoverOnMouseLeave}
className=""
to="/"
>
Services
</Link>
{menuHoverActive ? (
<ul className="flex bg-gray-700 flex-col xl:absolute xl:top-10">
<li className="">
<Link className="" to="/">
Link Three
</Link>
</li>
<li className="">
<Link className="" to="/">
Link Four
</Link>
</li>
</ul>
) : (
''
)}
</li>
</ul>
</nav>
)
}
答案 0 :(得分:1)
在您的代码中,您尝试使用一个布尔变量处理多个菜单悬停。但那是不可能的。所以看看下面的解决方案,我用一个对象管理它。
使用动态变量来处理悬停:
const Header = () => {
const [menuHoverActive, setMenuHoverActive] = useState({})
const handleHoverOnMouseEnter = (param) => {
setMenuHoverActive({[param]: true });
}
const handleHoverOnMouseLeave = (param) => {
setMenuHoverActive({[param]: false });
}
return (
<nav className="">
<ul className="xl:inline-flex xl:flex-row xl:ml-auto xl:w-auto w-full xl:items-center items-start flex flex-col xl:h-auto">
<li className="relative">
<Link
onMouseEnter={() => handleHoverOnMouseEnter('home')}
onMouseLeave={() => handleHoverOnMouseLeave('home')}
className=""
to="/"
>
Home
</Link>
{menuHoverActive && menuHoverActive.home ? (
<ul className="flex bg-gray-700 flex-col xl:absolute xl:top-10">
<li className="">
<Link className="" to="/">
Link One
</Link>
</li>
<li className="">
<Link className="" to="/">
Link Two
</Link>
</li>
</ul>
) : (
''
)}
</li>
<li className="relative">
<Link
onMouseEnter={() => handleHoverOnMouseEnter('services')}
onMouseLeave={() => handleHoverOnMouseLeave('services')}
className=""
to="/"
>
Services
</Link>
{menuHoverActive && menuHoverActive.services ? (
<ul className="flex bg-gray-700 flex-col xl:absolute xl:top-10">
<li className="">
<Link className="" to="/">
Link Three
</Link>
</li>
<li className="">
<Link className="" to="/">
Link Four
</Link>
</li>
</ul>
) : (
''
)}
</li>
</ul>
</nav> )}
答案 1 :(得分:0)
您的状态只能包含两个可能的值:p.ExitCode
(悬停)或 true
(不悬停)。您想要(至少)三个:1. 悬停在主页上,2. 悬停在服务上,3. 不悬停在任何一个上。
一种可能的方法是按住 false
或 "home"
表示悬停状态,例如,一个空字符串 "services"
表示不悬停在任何状态。