How do I create a dynamically loaded multi-level list in pure JavaScript?

enter a description of the image heresample layout

Please tell me the algorithm for writing a program for this list. Initially, there are two buttons on the layout: "CATALOG" and "FAVORITES". When you click on "catalog" and then on the nesting levels, new lists should be created from each item in the list. I get them via the API from the JSON format, there are no problems with this. The page should work without reloads. I will write the code myself, please just the algorithm, thank you in advance.

Author: ImmortaL KSG, 2020-06-15

1 answers

Option 1. Use onClick -> [].forEach((x) => {if(x.parent ==ourParent){}}, and then catch that the menu is under guidance.

Option 2. Use ready-made drop-down lists. For example, MUI. There you only need to pass Nodes, but such lists, most often, react.

Option 3. Use clicked and hover in css, changing the visibility of the div with child menu items

 1
Author: Hollow, 2020-06-15 13:18:09