विस्तारित पतन का विस्तार करें

Question

मेरे पास अनियंत्रित सूची है जिसे मुझे उपयोगकर्ता के क्लिक पर विस्तार/पतन करने की आवश्यकता है।

<ul> 
    <li><a href=#">Gunsmithing</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/16-barrel-threading.aspx">&nbsp;Barrel threading</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/17-barrel-cut-recrowning.aspx">&nbsp;Barrel Cut & &nbsp;&nbsp;Recrowning</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/19-gun-cleaning.aspx">&nbsp;Gun Cleaning</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/18-rifle-bedding.aspx">&nbsp;Rifle Bedding</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/20-scope-installation.aspx">&nbsp;Scope Installation</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/21-scope-sight-in.aspx">&nbsp;Scope Sight-in</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/22-trigger-job.aspx">&nbsp;Trigger Job</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/23-gun-accurization.aspx">&nbsp;Gun Accurization</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/24-engraving.aspx">&nbsp;Engraving</a>&nbsp;&nbsp;</li> 
</ul> 

तो जब उपयोगकर्ता लिंक Gunsmithing पर क्लिक करता है, आइटम नीचे का विस्तार करना चाहिए/संक्षिप्त करें: इस सूची में है।

मैं इसे कैसे प्राप्त कर सकता हूं? धन्यवाद, Laziale

Answer 1

HTML:

<ul class="list"> 
     <li> 
      <a>Rifles</a> 
      <ul> 
       <li>M16</li> 
       <li>MP5</li> 
       <li>AR15</li> 
       <li>M16A1</li>    
      </ul>     
     </li> 

     <li> 
      <a>Guns</a> 
      <ul> 
       <li>Magnum</li> 
       <li>Colt</li>  
      </ul>     
     </li> 
    </ul>​ 

जे एस:

$('.list > li a').click(function() { 
     $(this).parent().find('ul').toggle(); 
    });​ 

http://jsfiddle.net/mtCWr/2/

Answer 2

मैं उन लिंक की सूची घोंसले से शुरू करूंगा जिन्हें आप छिपाना चाहते हैं। कुछ इस तरह:

<ul class='main'> 
<li>main item -click to show subs 
    <ul> 
    <li>sub1</li> 
    <li>sub2</li> 
    ... 
    </ul> 
</li> 
... 
</ul> 

तो आप में सीएसएस आप डिफ़ॉल्ट रूप से बाद के चरणों छिपा सकते हैं:

ul.main > li > ul { 
display: none; 
} 

फिर मुख्य आइटम के क्लिक पर कि शैली बदलने के लिए जावास्क्रिप्ट है। jQuery कुछ इस तरह दिखेगा:

$('ul.main li').click(function() { 
    $(this).children('ul').toggle(); 
}); 

टिप्पणी यह ​​सिर्फ कुछ त्वरित स्यूडोकोड है, लेकिन यह है कि ट्रैक पर रखना चाहिए ...