espandibile Albero

Quello che voglio ottenere è la seguente:espandibile Albero

voglio avere un elenco con struttura ad albero che apparirà sul lato sinistro della pagina, quando un elemento è espanso, è articoli sono caricati da un database (che posso fare questa parte), in modo sostanzialmente andrà in questo modo:

+Category1 
+Category2 
+Category3 
+Category4

Quando l'utente fa clic su +, mostrerà il seguito fino a che i dati sono afferrato da DB e ha aggiunto alla pagina :

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

Dopo aver caricato i dati, ciascuna sottocategoria avrà una sotto-categoria secondaria.

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

Come posso ottenere questo risultato?

NOTA: Voglio sapere come mettere (o *> o di qualsiasi altro simbolo per la lista, credo che questo sia CSS, ma io non lavoro con un design a tutti !!)

Il vostro aiuto è Molto apprezzato.

fonte

2011-12-14 sikas

ok, così ho assumere l'elenco degli elementi è un ul Per ogni elemento, è possibile aggiungere una classe chiamata chiusa, questa clase sarebbe simile a questa in css:

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

Poi

fonte

2011-12-14 14:35:42 bigblind

c'è qualche codice HTML per questo? Voglio che mostri esattamente come nella domanda. – sikas

È possibile anteporre il testo - all'elemento utilizzando, ad esempio, il metodo '.text (newtext)' di jquery quando viene aperto e rimuoverlo per un + quando la sezione viene chiusa di nuovo. Non c'è HTML per creare un tale albero. – bigblind

Frederik Creemers, non lavoro con HTML, tutto il mio lavoro è principalmente con PHP e MySQL ... Quindi mi piacerebbe che fornissi un codice di esempio che lo dimostrasse. Sto cercando di trovare qualcosa su google, ho trovato buoni esempi ma tutorial settimanali !! – sikas

Avete dei requisiti per il browser? Ho usato l'esempio [CSS] Ninja, insieme a selectivizr per supportare versioni precedenti di IE. Non hai ancora un esempio accessibili, oltre a ciò che è sul [CSS] sito Ninja:

Pure CSS collapsible tree menu

E selectivizr:

selectivizr

L'esempio è orientata verso l'utilizzo per un scenario di navigazione dei file, ma dovresti essere in grado di modificarlo abbastanza facilmente per rimuovere le cartelle e le icone dei file, se lo desideri.

fonte

2011-12-14 15:42:40

espandibile Albero

risposta

Problemi correlati