javascript - 如何创建一个大的导航菜单

Question

我正在尝试创建一个包含组和元素的菜单。

目前代码看起来是这样的

<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>

它是这样的:https://gyazo.com/74e407b749e3a05574703e5c3b2256b3

这是应该如何工作的:

• 1) 用户点击打开一个组(框左侧的白色三 Angular 形)

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

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

我希望你明白了...(我不擅长解释事情)。

现在...我已经尝试手动执行此操作，为每个元素添加一个 div，但感觉这不是正确的方法，因为:

• A) HTML 代码已经有 400 行左右
• B) 随着我不断扩展此菜单，页面的加载时间会越来越长(我假设？)

我怎样才能以某种自动化方式用元素填充组？我的想法是在打开一个组时运行一个脚本，用数据库/xml 文件中的元素填充它，但我想听听其他解决方案。

Answer 1

我假设以下事情。

1. 层次结构的深度可以是任何级别。
2. 每一层的长度可以是任意的。

我建议将菜单从 Accordion 更改为 Cascading 样式。

1. 如果层次结构的深度更多，当深度在列宽中移动更多时，您可能会以带省略号的一半显示名称结束。请看以下
2. 如果单个层次结构中的元素数量更多，您可以最终使用垂直滚动条。同样，用户体验将与观看体验不一致。 在这种情况下，最好使用 级联菜单样式。请看下图。 但是，对于这种菜单样式，静态或动态加载都可以。不过，我会推荐静态菜单加载并使用 css 来处理悬停和显示和隐藏。

注意:由于组合方法( Accordion +树)不适合多级和多个菜单项，我只推荐正确的方法。而且我相信，它只需要很少研究 css 属性，如位置、z-index、显示或可见。我把那些东西留给你了。