javascript - 两级列表的 HTML 组件

Question

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

I was thinking in a breadcrumbs + a single list holder: first level elements are shown by default in the list holder, and when an element is selected, breadcrumb is updated with the element name/title, and list holder contents is replaced由二级相关元素。

默认/家庭状态:

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

通过单击“>”选择元素 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 }

或

示例 CSS:

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

在这里 fiddle :http://jsfiddle.net/zho99zwa/