Javascript 如何创建大型导航菜单

我正在尝试创建一个包含组和项目的菜单

目前，代码看起来是这样的

<div id="Layer_01_Category_01_Header" class="Some classes here">
</div>
<div id="Layer_01_Category_01_Content" class="Some classes here">
    <div id="Layer_02_Category_01_Header" class="Some classes here">
    </div>
    <div id="Layer_02_Category_01_Content" class="Some classes here">
        <div id="Layer_03_Category_01_Header" class="Some classes here">
        </div>
        <div id="Layer_03_Category_01_Content" class="Some classes here">
            ITEMS HERE
        </div>
        <div id="Layer_03_Category_02_Header" class="Some classes here">
        </div>
        <div id="Layer_03_Category_02_Content" class="Some classes here">
            ITEMS HERE
        </div>
    </div>
</div>

这里的项目
这里的项目

这就是它的样子：

这就是它的工作原理：

• 1） 用户单击打开组（方框左侧有白色三角形）

• 2） 将加载属于该组的项目（浅灰色背景），用户可以单击其中一个项目以查看有关该项目的更多信息（显示在菜单外另一个div上的信息）

• 3） 用户打开另一个组。以前打开的组被关闭，内容被隐藏/删除

我希望你能明白。。。（我不善于解释事情）

现在。。。我曾尝试手动执行此操作，为每个项目添加一个div，但感觉这样做并不正确，因为：

• A） HTML代码已经有大约400行了
• B） 我越是扩展这个菜单，页面的加载时间就会越来越长（我想是吧？）

---

我如何以某种自动化的方式向组中填充项目？我想到的是在打开一个组时运行一个脚本，用数据库/xml文件中的项目填充该组，但我想听听其他解决方案

层次结构的深度可以是任何级别

每个关卡的长度可以是任何东西

我建议将菜单从手风琴改为层叠风格

若层次结构的深度更大，那个么当深度在列宽中移动得更大时，可能会以带省略号的半显示名称结束。请看下面

如果单个层次结构中的项目数更多，则可以使用垂直滚动条。同样，用户体验将与查看体验不一致。 在这种情况下，最好使用

级联菜单样式

。请看下图。 但是，对于这种菜单样式，静态或动态加载都可以。不过，我建议静态菜单加载，并使用css处理悬停和显示隐藏 注意：由于组合方法（accordion+tree）不适合多层次和多个菜单项，所以我只推荐正确的方法。我相信，它只需要对css属性（如位置、z索引、显示或可见）进行很少的研究。我把那些东西留给你了