2011-12-14 8 views
15

şudur:Genişletilebilir Ağacı Menü Listesi Ne elde etmek istiyorum

Bir Öğe genişletildiğinde sayfanın sol tarafında görünecektir ağaç görünümlü listesi var istiyorum

, bu ürün yüklenmeden var bir veritabanından, (Bu kısmı yapabilirsiniz) böylece temelde bu gibi devam eder: veri DB'den yakaladı ve sayfasına eklenir kadar

+Category1 
+Category2 
+Category3 
+Category4 

kullanıcı + tıkladığında

, aşağıda gösterecektir :

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

Veri yüklendikten sonra, her bir alt kategori WILL alt alt kategoriye sahiptir.

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

Bunu nasıl başarabilirim?

NOT: Ben koymak nasıl bilmek istiyorum

Yardımına olduğu (* veya > veya liste için herhangi bir başka sembolü, ben !! bu CSS ama hiç tasarımı ile çalışmıyor inanmak) gerçekten takdir ettim.

cevap

5
Tamam

, bu yüzden bu clase css şu şekilde görünecektir, sen kapalı denilen bir sınıf ekleyebilir, öğeler liste her öğenin için bir ul olduğunu varsayalım:

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

Ardından

+0

Bunun için herhangi bir HTML kodu var mı? Tam olarak sorudaki gibi göstermesini istiyorum. – sikas

+0

- Açıldığında, örneğin jquery'nin '.text (newtext)' yöntemini kullanarak öğedeki metne - ve onu yeniden kapatabilir ve onu bölüm kapatıldığında + için değiştirebilirsiniz. Böyle bir ağaç oluşturmak için HTML yok. – bigblind

+0

Frederik Creemers, HTML ile çalışmaz, tüm çalışmalarım esasen PHP ve MySQL'le birlikte ... Bu yüzden bunu gösteren örnek bir kod sağladığınız için minnettarım. Google'da bir şey bulmaya çalışıyorum, iyi örnekler buldum ama hafta dersleri !! – sikas

9

Herhangi bir tarayıcı gereksiniminiz var mı? IE'nin eski sürümlerini desteklemek için selectivizr ile birlikte [CSS] Ninja örneğini kullandım.

Pure CSS collapsible tree menu

Ve selectivizr: örnek kullandıktan yönelikse

selectivizr

ayrı [CSS] Ninja sitesinde ne gelen erişilebilir bir örneği, yok mu Dosya gezinti senaryosu, ancak klasörleri ve dosya simgelerini kaldırmak için onu kolayca değiştirebilmelisiniz.