可扩展树菜单列表

Question

我想要实现的目标如下:

我希望有一个树视图列表,它将出现在页面的左侧,当一个Item展开时,它的项目是从数据库加载的(我可以做这个部分),所以基本上它会像这样:

+Category1
+Category2
+Category3
+Category4

当用户点击时+,它将显示以下内容,直到数据从数据库中获取并添加到页面中:

+Category1
-Category2
    loading ...
+Category3
+Category4

加载数据后,每个子类别将具有子子类别.

+Category1
-Category2
    +Sub-Cat1
    +Sub-Cat2
    +Sub-Cat3
    +Sub-Cat4
+Category3
+Category4

我怎样才能做到这一点？

注意:我想知道如何放置(*或者>列表的任何其他符号,我相信这是CSS,但我根本不使用设计!!)

非常感谢您的帮助.

Answer 1

你有浏览器的要求吗？我使用了[CSS] Ninja示例,以及selectivizr来支持旧版本的IE.除了[CSS] Ninja网站上的内容之外,没有可访问的示例:

和选择:

该示例适用于将其用于文件导航方案,但如果需要,您应该能够相当轻松地修改它以删除文件夹和文件图标.

Answer 2

好吧,所以我假设你的项目列表是一个ul To To items ,你可以添加一个名为closed的类,这个clase在css中看起来像这样:

.closed:before{content:'+';}
.opened:before{content:'-';}

然后<ith javascript,你去解决这些类.您还可以在上面的CSS中为这些+和 - 符号添加其他样式,以赋予其边框和背景颜色.