Danh sách menu cây có thể mở rộng

Question

Điều tôi muốn đạt được là:

Tôi muốn có danh sách dạng cây sẽ xuất hiện ở bên trái của trang, khi một Mục được mở rộng, các mục được tải từ một cơ sở dữ liệu (tôi có thể làm phần này), vì vậy về cơ bản nó sẽ đi như thế này:

+Category1 
+Category2 
+Category3 
+Category4 

Khi người dùng nhấp vào +, nó sẽ hiển thị bên dưới cho đến khi dữ liệu được lấy từ DB và thêm vào trang :

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

Sau khi dữ liệu được tải, mỗi danh mục con S W sẽ có danh mục con phụ.

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

Tôi làm cách nào để đạt được điều này?

Chú ý: Tôi muốn biết làm thế nào để đưa (* hoặc > hoặc bất kỳ biểu tượng khác cho danh sách này, tôi tin rằng đây là CSS nhưng tôi không làm việc với thiết kế ở tất cả !!)

sự giúp đỡ của bạn là rất cảm kích.

Answer 1

ok, vì vậy tôi cho rằng danh sách các mặt hàng là một ul Để mỗi mục, bạn có thể thêm một lớp được gọi là đóng cửa, clase này sẽ trông như thế này trong css:

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

Sau đó

Answer 2

Bạn có bất kỳ yêu cầu nào về trình duyệt không? Tôi đã sử dụng ví dụ Ninja [CSS], cùng với selectivizr để hỗ trợ các phiên bản cũ hơn của IE. Đừng có một ví dụ truy cập, ngoài những gì là trên [CSS] Ninja trang web:

Pure CSS collapsible tree menu

Và selectivizr:

selectivizr

Ví dụ hướng tới sử dụng nó cho một kịch bản điều hướng tập tin, nhưng bạn sẽ có thể dễ dàng sửa đổi nó để loại bỏ các biểu tượng thư mục và tập tin, nếu bạn muốn.