展開摺疊無序列表

我有無序的列表，我需要在用戶的點擊上展開/摺疊。這是列表：展開摺疊無序列表

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

所以，當用戶點擊鏈接的槍械製造，下述項目應擴大/崩潰。

我該如何做到這一點？謝謝，Laziale

來源

2012-08-03 Laziale

應該是 – 2012-08-03 15:24:41

@ JSW189還沒有，我想知道什麼是最好的方法。謝謝 – Laziale 2012-08-03 15:25:31

@MarkPrice錯字，對不起 – Laziale 2012-08-03 15:26:16

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>

JS：

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

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

來源

2012-08-03 15:33:38

非常有幫助。感謝您花時間做jsfiddle.net示例。真的很清楚。 – 2012-11-01 05:10:58

不客氣！ – 2012-11-21 13:38:58

這隻適用於兩個級別。如果您希望將其應用於第三層，第四層和第五層，請使用'$（this）.parent（）。children（'ul'）。toggle（）;'而不是'$（this）.parent（）。 find（'ul'）。toggle（）;'（用'children'替換'find'）。這裏是工作小提琴 - > http://jsfiddle.net/mtCWr/2075/ – 2016-03-09 15:40:34

我會先嵌套你想隱藏的鏈接列表。是這樣的：

<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來改變主項的點擊該樣式。 jQuery的會是這個樣子：

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

注意到這僅僅是一些快速的僞代碼，但應該把你的軌道上......

來源

2012-08-03 15:31:00 Pevara

展開摺疊無序列表

回答

相關問題