拡大縮小リスト無秩序リスト

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：：jQueryのは、次のようになります

<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>​ 

JS：

$('.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> 

その後、あなたは、デフォルトで潜水艦を非表示にすることができ、CSSで：

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

は、メイン項目をクリックするだけでそのスタイルを変更するにはJavaScriptを行います。 ...これは単にいくつかの簡単な擬似コードであるが、それはトラックにあなたを置くべき

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

ノート