悬停时仅显示与菜单相关的元素
悬停时仅显示与菜单相关的元素
提问于 2020-05-20 15:09:11
在我的React项目中，我有一个带有两个主要列表/导航项目的菜单，并希望在悬停时显示一个元素，并且当用户悬停在子菜单上时也保持可见。我可以使用css hover和设置一个状态的基于className的boolean来实现这一点。
问题是，当用户将鼠标悬停在子菜单上时，如何显示与该菜单相关的元素？现在，当子菜单悬停时，这两个元素都会显示。我使用.map来填充菜单和子菜单项，所以我想知道是否有一个属性可以控制这一点？
代码如下：
import React, { useState } from "react";
import styles from "./nav.module.scss";
import "../../styles/main.scss";
const Nav = ({
navItems = [
{
id: "",
label: "",
subMenu: [{}]
}
]
}) => {
const [ballColor, setBallColor] = useState();
const [showBall, setShowBall] = useState(false);
const handleHover = () => {
setShowBall(!showBall);
};
return (
<>
<nav>
{/* Start of Menu Items */}
<div className={styles.menuItemsContainer}>
<ul className={styles.navUl}>
{navItems.map(item => (
<li key={item.id}>
<a href="https://www.google.com">
<div
className={
showBall
? `${styles.ball} ${styles.showBall} ${
styles[ballColor]
}`
: `${styles.ball} ${styles[ballColor]}`
}
/>
{item.label}
</a>
<ul
className={
item.subMenu.length === 0
? `${styles.noDisplay}`
: `${styles.display}`
}
onMouseEnter={handleHover}
onMouseLeave={handleHover}
>
{item.subMenu.map(subItem => (
<li
key={subItem.id}
className={styles[subItem.class]}
onMouseOver={() => {
setBallColor(subItem.ballColor);
}}
onMouseLeave={() => setBallColor(null)}
>
{subItem.item}
</li>
))}
</ul>
</li>
))}
</ul>
</div>
{/* End of Menu Items */}
</nav>
</>
);
};
export default Nav;有关参考，请参阅sandbox。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-20 15:40:32
您需要的是一个颜色数组:每个主菜单对应一种颜色。
下面的代码是实现它的一种方法，我不喜欢循环中的所有这些循环，所以它只是一种向你展示如何处理它的方法，但可能不是最好的：
import React, { useState } from "react";
import styles from "./nav.module.scss";
import "../../styles/main.scss";
const Nav = ({
navItems = [
{
id: "",
label: "",
subMenu: [{}]
}
]
}) => {
const [ballColors, setBallColor] = useState(["#fff", "#fff"]);
const [showBalls, setShowBall] = useState([false, false]);
const handleHover = i => {
setShowBall([...showBalls].map((bool, j) => (i === j ? !bool : bool)));
};
return (
<>
<nav>
{/* Start of Menu Items */}
<div className={styles.menuItemsContainer}>
<ul className={styles.navUl}>
{navItems.map((item, i) => (
<li key={item.id}>
<a href="https://www.google.com">
<div
className={
showBalls[i]
? `${styles.ball} ${styles.showBall} ${
styles[ballColors[i]]
}`
: `${styles.ball} ${styles[ballColors[i]]}`
}
/>
{item.label}
</a>
<ul
className={
item.subMenu.length === 0
? `${styles.noDisplay}`
: `${styles.display}`
}
onMouseEnter={() => handleHover(i)}
onMouseLeave={() => handleHover(i)}
>
{item.subMenu.map((subItem, j) => (
<li
key={subItem.id}
className={styles[subItem.class]}
onMouseOver={() => {
setBallColor(
[...ballColors].map((color, k) =>
i === k ? subItem.ballColor : color
)
);
}}
onMouseLeave={() =>
setBallColor(
[...ballColors].map((color, k) =>
i === k ? "#fff" : color
),
i
)
}
>
{subItem.item}
</li>
))}
</ul>
</li>
))}
</ul>
</div>
{/* End of Menu Items */}
</nav>
ballColors: {ballColors.join(" ")}
</>
);
};
export default Nav;这里是a fork of your codepen作为该解决方案的演示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61916532
复制相关文章
相似问题
腾讯云开发者
