将鼠标悬停在选项元素上？

Question

我可以将鼠标悬停在选项元素上以显示更多选项吗？我想要一个像下面截图一样的下拉嵌套组件

我有这个对象数组并将其传递给 DropDown 组件，如果第一个对象有一个名为 modules 的字段并且它有一个包含两个对象的数组，我如何将它显示为嵌套下拉列表？

index.js

import React from "react";
import ReactDOM from "react-dom";
import DropDown from "./DropDown";

const availableModules = [
  {
    text: "environment",
    value: "Environment",
    modules: [{ key: "greenhouse" }, { key: "protected species" }],
  },
  {
    text: "mobility",
    value: "Mobility",
    modules: [
      { key: "walk accessibility" },
      { key: "transit accessibility" },
      { key: "travel patterns" },
    ],
  },
  {
    text: "resiliency",
    value: "Resiliency",
    modules: [{ key: "flood" }, { key: "fire" }, { key: "earthquake" }],
  },
];

ReactDOM.render(
  <DropDown availableModules={availableModules} />,
  document.getElementById("root")
);

Dropdown.js

const DropDown = ({availableModules}) => {


return (
 <div>
   <p>Select Option </p>
      <select >
        {availableModules.map((item, index) => (
            <option
                value={item.text}
                key={index}
            >
            {item.text}
            </option>
        ))} 
    </select>
 </div>
 )
}

Answer 1

是的，你可以。只需渲染整个 div 结构，包括所有 UL 和 LI，并使用 css 到 show/hide 菜单和子菜单。

不需要为此使用状态 - showing/hiding 通过 css 并通过 css 检测悬停 - css 单独可以处理工作。

在所需的 LI 项目上，按正常方式添加点击处理程序。

<li 
    onClick={handleDoThisParticularThing}
>
    This particular item
</li>

网上有很多例子。只是 google 类似 create a nested menu system css

https://css-tricks.com/solved-with-css-dropdown-menus/

https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/

将鼠标悬停在选项元素上？

Hover on an option element?

javascript

css

drop-down-menu

reactjs

dropdown