问悬停时仅显示与菜单相关的元素
EN

Stack Overflow用户

提问于 2020-05-20 15:09:11

回答 1查看 96关注 0票数 1

在我的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。

javascript

reactjs

回答 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;