Html 可展开树菜单列表

我希望实现以下目标：

我希望有一个树状视图列表，它将出现在页面的左侧，当项目展开时，它的项目将从数据库加载（我可以完成这部分），因此基本上它将如下所示：

+Category1
+Category2
+Category3
+Category4

当用户单击

+

时，它将显示以下内容，直到从DB抓取数据并添加到页面：

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

加载数据后，每个子类别都将有子类别

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

我怎样才能做到这一点

注意：我想知道如何放置（

*

或

或列表中的任何其他符号，我相信这是CSS，但我根本不使用设计！！）

---

非常感谢您的帮助。

好的，所以我假设您的物品清单是

ul

对于每个项目，您都可以添加一个名为closed的类，该类在css中如下所示：

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

---

然后è使用javascript，您可以切换这些类。您还可以在上述css中的+和-符号中添加其他样式，使其具有边框和背景色。

您有任何浏览器要求吗？我使用了[CSS]忍者示例以及selectivizr来支持IE的旧版本。除了[CSS]忍者网站上的示例外，没有可访问的示例：

和selectivizr：

---

该示例旨在将其用于文件导航场景，但如果需要，您应该能够相当轻松地修改它以删除文件夹和文件图标。

是否有任何HTML代码？我希望它的显示与问题中的显示完全相同。您可以在打开元素时使用jquery的

.text（newtext）

方法将-前置到元素中的文本，然后将其删除，并在再次关闭部分时将其切换为+。没有HTML来创建这样的树。Frederik Creemers，我不使用HTML，我所有的工作主要是使用PHP和MySQL。。。因此，如果您能提供一个示例代码来演示它，我将不胜感激。我试图在谷歌上找到任何东西，找到好的例子，但每周教程！！