Question

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

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

默认/家庭状态：

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

通过点击＆＃34;＆gt;＆＃34;

选择元素-2后

----
element-2 \
----
element2.1
element2.2
...
element2.m
----

Answer 1

您只需使用嵌套列表元素。

如果您在<ul>内放置第二个<li>，则可以默认隐藏它。并使用CSS在悬停时显示隐藏的项目。或者，使用CSS和Javascript / jQuery的组合，在点击时为父<li>提供类似active的类，然后显示隐藏的项目。

示例HTML：

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

示例CSS：

ul ul { display:none }
ul li:hover ul { display:block }

OR

示例CSS：

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