rozbudowy Drzewo Lista menu

Question

Co chcę osiągnąć jest następujące:

Chcę mieć listę widoku drzewa, który pojawi się po lewej stronie strony, gdy element jest rozwinięty, to elementy są ładowane z bazy danych (mogę zrobić tę część), więc w zasadzie będzie to wyglądać tak:

+Category1 
+Category2 
+Category3 
+Category4 

Gdy użytkownik kliknie na +, pokaże niżej aż dane zostaną chwycił od DB i dodane do strony :

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

Po załadowaniu danych każda podkategoria BĘDZIE mieć podkategorię.

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

Jak mogę to osiągnąć?

UWAGA: Chcę wiedzieć, jak umieścić (* lub > lub jakiegokolwiek innego symbolu dla listy, wierzę, to jest CSS, ale nie pracuję z projektu w ogóle !!)

Twoja pomoc jest naprawdę doceniony.

Answer 1

ok, więc zakładamy, że lista elementów jest ul Do każdego elementu, można dodać klasę o nazwie zamknięte, to clase będzie wyglądać to w css:

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

Następnie

Answer 2

Czy masz jakieś wymagania dotyczące przeglądarki? Użyłem przykładu [CSS] Ninja wraz z selectivizr do obsługi starszych wersji IE. Nie masz dostępną przykład, oprócz tego, co znajduje się na stronie [CSS] Ninja:

Pure CSS collapsible tree menu

I selectivizr:

selectivizr

Przykład nakierowana jest on używany przez scenariusz nawigacji plików, ale powinieneś być w stanie dość łatwo go zmodyfikować, aby usunąć foldery i ikony plików, jeśli chcesz.