Javascript 两级列表的HTML组件

在编写一个新的指令来获得我想要的东西之前，只想知道是否有任何组件（可能是Angular UI或Bootstrap）允许浏览列表，并通过选择一个元素，在第一个元素上显示与所选元素相关的第二个列表。 出于可用性和L&F的原因，树不是正确的答案

我在考虑面包屑+单个列表持有者：默认情况下，列表持有者中显示第一级元素，当选择一个元素时，面包屑将用元素名称/标题更新，列表持有者的内容将被第二级相关元素替换

默认/主状态：

----
\
----
element-1 >
element-2 >
...
element-n >
----

单击“>”选择元素2后：

---

您只需要使用嵌套的列表元素

如果将第二个

放置在

中，则默认情况下可以将其隐藏。或者使用CSS显示悬停时隐藏的项目。或者，使用CSS和Javascript/jQuery的组合，在单击时为父级

提供类似于

活动的类，从而显示隐藏项

HTML示例：

<ul>
  <li>
    Item
    <ul>
      <li>SubItem</li>
    </ul>
  </li>
</ul>

或

CSS示例：

ul ul { display:none }
ul li.active ul { display:block }

在这里摆弄：
我想用一种更像浏览器的方式，通过单击交互访问下一级元素。您可以更改要嵌套的项的类型。列表只是一个非常简单的例子。aaa而且，如果您采用使用Javascript/jQuery的方法，那么您可以将其更改为onClick events，而不是hover。
ul ul { display:none }
ul li:hover ul { display:block }

ul ul { display:none }
ul li.active ul { display:block }