Html 可扩展的树形菜单列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8506118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expandable Tree Menu List
提问by sikas
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
How can I achieve this?
我怎样才能做到这一点？
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!!)
注意：我想知道如何放置（*或>列表中的任何其他符号，我相信这是 CSS，但我根本不从事设计！）
Your help is really appreciated.
非常感谢您的帮助。
回答by Joseph Ferris
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] Ninja 示例以及 selectivizr 来支持旧版本的 IE。除了 [CSS] Ninja 网站上的内容之外，没有可访问的示例：
Pure CSS collapsible tree menu
And 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.
该示例旨在将其用于文件导航方案，但您应该能够相当轻松地修改它以删除文件夹和文件图标，如果需要的话。
回答by bigblind
ok, so I assume your list of items is an ulTo every item, you can add a class called closed, this clase would look like this in css:
好的，所以我假设您的项目列表是ul对每个项目，您可以添加一个名为 closed 的类，这个类在 css 中看起来像这样：
.closed:before{content:'+';}
.opened:before{content:'-';}
Then ?ith javascript, you togle those classes. You could also add other styles to these + and - signs in the css above, to give it a border and background color.
然后 ?ith javascript，你切换这些类。您还可以在上面的 css 中为这些 + 和 - 符号添加其他样式，为其指定边框和背景颜色。
