展开折叠无序列表

我有无序的列表，我需要在用户的点击上展开/折叠。这是列表：展开折叠无序列表

<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

展开折叠无序列表

回答

相关问题