विस्तार योग्य ट्री मेनू सूची

Question

क्या मैं हासिल करना चाहते हैं निम्नलिखित:

मैं एक पेड़-व्यू सूची जब एक आइटम का विस्तार किया गया है कि पेज, के बाईं ओर दिखाई देगा करना चाहते हैं, यह आइटम भरी हुई हैं किसी डेटाबेस से (मैं इस हिस्से कर सकते हैं), तो मूल रूप से यह कुछ इस तरह होगी:

+Category1 
+Category2 
+Category3 
+Category4 

उपयोगकर्ता + पर क्लिक करता है, यह नीचे प्रदर्शित करेगी जब तक डेटा डीबी से पकड़ा और पेज में जोड़ा जाता है :

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

डेटा लोड होने के बाद, प्रत्येक उप-श्रेणी में उप-उप-श्रेणी होगी।

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

मैं इसे कैसे प्राप्त कर सकता हूं?

नोट: मुझे पता है कि कैसे रखना चाहते हैं (* या > या सूची के लिए किसी भी अन्य प्रतीक, मेरा मानना ​​है कि इस सीएसएस है, लेकिन मैं सभी को एक डिजाइन के साथ काम नहीं करते !!)

आपका मदद है काबिल ए तारीफ़। तब

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

<जावास्क्रिप्ट ith,:

Answer 1

ठीक है, तो मुझे लगता है अपने आइटमों की सूची एक ul हर आइटम के लिए है, तो आप एक वर्ग को बंद कर दिया कहा जाता है जोड़ सकते हैं, इस clase सीएसएस में इस प्रकार दिखाई देगा आप उन वर्गों को टॉगल करते हैं। आप सीमाओं और पृष्ठभूमि रंग देने के लिए उपरोक्त सीएसएस में इन + और - संकेतों में अन्य शैलियों को भी जोड़ सकते हैं।

Answer 2

क्या आपके पास कोई ब्राउज़र आवश्यकता है? मैंने आईई के पुराने संस्करणों का समर्थन करने के लिए selectivizr के साथ [सीएसएस] निंजा उदाहरण का उपयोग किया है।

Pure CSS collapsible tree menu

और selectivizr:

selectivizr

उदाहरण एक के लिए उपयोग करने की दिशा में सक्षम है एक सुलभ उदाहरण, के अलावा क्या [सीएसएस] निंजा साइट पर है से नहीं है फ़ाइल नेविगेशन परिदृश्य, लेकिन आप फ़ोल्डर और फ़ाइल आइकन को हटाने के लिए इसे आसानी से संशोधित करने में सक्षम होना चाहिए, आपको चाहिए।