可展开树菜单列表 [英] Expandable Tree Menu List

问题描述

我想要实现的是以下内容：

What I want to achieve is the following:

我想有一个树形视图列表，将显示在页面的左侧，扩展，它的项目从数据库加载（我可以做这部分），所以基本上会这样：

I want to have a tree-view list that will appear on the left side of the page, when an Item is expanded, it's items are loaded from a database (I can do this part), so basically it will go like this:

+Category1
+Category2
+Category3
+Category4

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

When the user clicks on +, it will show the below till the data is grabbed from DB and added to the page:

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

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

After the data is loaded, each sub-category WILL have sub-sub-category.

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

如何实现？

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

NOTE: I want to know how to put (* or > or any other symbol for the list, I believe this is CSS but I don't work with design at all!!)

您的帮助非常感谢。 / p>

Your help is really appreciated.

推荐答案

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

Do you have any browser requirements? I have used the [CSS] Ninja example, along with selectivizr to support older versions of IE. Don't have an accessible example, apart from what is on the [CSS] Ninja site:

纯CSS可折叠树菜单

和selectivizr：

And selectivizr:

selectivizr

该示例适用于文件导航场景，但你应该能够相当容易地修改它以删除文件夹和文件图标，如果你想要的。

The example is geared towards using it for a file navigation scenario, but you should be able to fairly easily modify it to remove the folders and file icons, should you want.

这篇关于可展开树菜单列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！