悬停在选项元素上？

Question

是否可以将鼠标悬停在选项元素上以显示更多选项？我希望有一个下拉嵌套组件，如下面的屏幕截图所示

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

​

​

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来显示/隐藏菜单和子菜单。

这不需要使用状态-通过css显示/隐藏和通过css检测悬停- css本身就可以处理这项工作。

在所需的LI项上，按常规添加您的单击处理程序。

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

网上有很多例子。只要用谷歌搜索一下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/