jQuery：如何制作可折叠的树导航？

我有标题，每个标题都有子项。当我点击标题时，我希望它切换查看或显示标题内容：

这是我到目前为止：

$j('h2').click(function() { if ($j(this).next().is(":hidden")) { $j(this).next().show(); } else { $j(this).next().hide(); } });

我的HTML看起来像这样：

  Section One
  text
 text
 text
 
 
 Section Two
   text
 text
 text

您可以按照它的方式执行此操作，或使用.slideToggle()使用幻灯片效果，如下所示：

 $('h2').click(function() { $(this).next().stop(true, true).slideToggle(); });

你可以在这里测试一下

或者使用.toggle() （在此测试）立即没有幻灯片效果：

 $('h2').click(function() { $(this).next().toggle(); });

或使用.toggle(speed) （此处测试）的幻灯片+淡入淡出效果，如下所示：

 $('h2').click(function() { $(this).next().stop(true, true).toggle("fast"); });

在每种情况下，对.stop()的调用都是为了防止动画队列的建立。这段代码适用于$ == jQuery大多数用户，看起来你正在使用.noConflict()所以只需将$替换$ $j就像你当前的代码一样。

这是一个关于这个主题的好教程：

如果你想继续使用列表中的

标签，你将不得不稍微调整一下，但这应该是微不足道的。

Section One