可扩展的树形菜单列表答案

【问题标题】：Expandable Tree Menu List可扩展的树形菜单列表
【发布时间】：2011-12-14 14:29:12
【问题描述】：

我想要达到的目标如下：

我想要一个出现在页面左侧的树视图列表，当展开一个项目时，它的项目是从数据库加载的（我可以做这部分），所以基本上它会像这个：

+Category1
+Category2
+Category3
+Category4

当用户点击+时，它将显示如下，直到从数据库中抓取数据并添加到页面中：

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

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

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

我怎样才能做到这一点？

注意：我想知道如何放置（* 或 > 或列表的任何其他符号，我相信这是 CSS，但我根本不从事设计工作！！）

非常感谢您的帮助。

【问题讨论】：

【解决方案1】：

您对浏览器有什么要求吗？我使用了 [CSS] Ninja 示例以及 selectivizr 来支持旧版本的 IE。除了 [CSS] Ninja 网站上的内容之外，没有可访问的示例：

还有选择性：

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

【讨论】：

【解决方案2】：

好的，所以我假设您的项目列表是ul 可以为每个项目添加一个名为 closed 的类，该类在 css 中如下所示：

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

然后‹ith javascript，您切换这些类。您还可以在上面的 css 中为这些 + 和 - 符号添加其他样式，为其赋予边框和背景颜色。

【讨论】：

有任何HTML代码吗？我希望它完全按照问题显示。
您可以在打开时使用例如 jquery 的 .text(newtext) 方法将 - 添加到元素中的文本，然后将其删除，并在该部分再次关闭时将其切换为 +。没有 HTML 可以创建这样的树。
Frederik Creemers，我不使用 HTML，我所有的工作主要是使用 PHP 和 MySQL ...所以我希望您提供一个示例代码来演示它。我试图在谷歌上找到任何东西，找到了很好的例子，但一周的教程！！