एचटीएमएल ढह गया/विस्तारित पेड़

Question

मैं एचटीएमएल में एक पेड़ उत्पन्न करने के लिए this कोड का उपयोग कर रहा हूं, और समस्या यह है कि हर बार जब मैं पेड़ फैलता हूं तो पेज को ताज़ा करता हूं।

मैं इसे बनाना चाहता हूं ताकि जब मैं पृष्ठ खोलूं, तो कुछ शाखाओं का विस्तार किया जाएगा और कुछ इसकी विशेषता के आधार पर ध्वस्त हो जाएंगे।

उदाहरण के लिए:

<span><i class="icon-plus-sign"></i> Parent 1</span> 
    <ul> childrens go here 
    </ul> 
<span><i class="icon-minus-sign"></i> Parent 2</span> 
    <ul> childrens go here 
    </ul> 

जब मैं पृष्ठ को खोलने, मैं जनक 2 के बच्चों को देखने के लिए चाहते हैं, लेकिन नहीं जनक 1 की।

मैं एचटीएमएल में नौसिखिया हूं और पूरी तरह से सीएसएस और जावास्क्रिप्ट के लिए नया हूं। तो कोई सुझाव मदद करेगा। कि यह प्रत्येक नोड के माध्यम से जाने के लिए और इसे छिपाने जाएगा

//Collapse each node 
$('.tree li.parent_li > span').each(function(){ 
    var children = $(this).parent('li.parent_li').find(' > ul > li'); 
    children.hide('fast'); 
    $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); 
}); 

:

Answer 1

आप कोड के पास के शुरू में जोड़ सकते हैं प्रत्येक तत्व चिह्न अपने आइकन वर्ग का उपयोग करके ध्वस्त हो जाता है।

कोड:

$('.tree li.parent_li > span').each(function(i,e){ 
    if ($(this).find('i').hasClass("icon-plus-sign")){ 
     $(this).parent('li.parent_li').find(' > ul > li').hide(); 
    } 
}); 

डेमो: http://jsfiddle.net/q3DQ2/

Answer 2

अपने OnClick समारोह के बाद सही निम्नलिखित जोड़ें।

एक और तरीके से करना यह डिफ़ॉल्ट रूप से यह है करने के लिए किया जाएगा के साथ छिपा हो:

style="display: none;" 

प्रत्येक नोड पर

आप चाहते हैं छिपा

Answer 3

अगर मैं सही ढंग से समझ, आप कुछ तत्वों के कारण होगा जो उन्हें पृष्ठ लोड पर बंद किए जाने के लिए एक वर्ग जोड़ना चाहते हैं?

सरल समाधान JQuery की तह तक

$(".start-closed").click();

जोड़ने के लिए और फिर नोड्स आप पृष्ठ लोड पर बंद करना चाहते करने के लिए वर्ग start-closed जोड़ने होगा।

JSFiddle: http://jsfiddle.net/dksNr/

मुझे पता है कि अगर मैं सवाल गलत समझा न कर दें।