jQuery展开和折叠功能

Question

我是 Jquery/javascript 的新手，我自己有一堆层次的链接，我需要将它们组织成可以通过 +/- 按钮展开和折叠的列表。

我正在使用的信息的一个例子是：

Category1 (Level 1)
- Subcategory 1 (Level 2)
- Subcategory 2
- Subcategory 3
Category2 (Level 1)
- Subcategory 1 (Level 2)
- Subcategory 2
- Subcategory 3
Category3 (Level 1)
- Subcategory 1 (Level 2)
----Subcategory 1 (Level 3)
- Subcategory 2
- Subcategory 3

代码方面，它看起来像这样：

<div class="navCol">
<h4>Pet Club</h4>
<ul>
    <li><a href="/pc/home">Pet Home</a></li>
    <li><a href="/pc/articles">Arts</a></li>
    <li><a href="/pc/coupons">ns</a></li>
    <li><a href="/pc/pet-prescriptions">Pet Prescrions</a></li>
</ul>
</div>
<div class="navCol">
<h4>Fresh Ideas</h4>
<ul>
    <li><a href="/fi/cooking-guide">Know Yur Food</a></li>
    <li><a href="/fi/departments">Depaments</a></li>
    <li><a href="/fi/gluten-free">Free</a></li>
    <li><a href="/fi/house-of-bbq">HoBQ</a></li>
    <li><a href="/fi/how-to-shop">rt</a></li>
    <li><a href="/fi/kids-cooking-club">Kidsb</a></li>
    <li><a href="/fi/price-chopper-products">Tr</a></li>
</ul>
</div>
<div class="navCol">
<h4>vings</h4>
<ul>
    <li><a href="/vings/advantedge-card">w</a></li>
    <li><a href="/vings/baby-club">Bb</a></li>
    <li><a href="/vings/blue-rhino">asdf</a></li>
    <li><a href="/vings/grocery-apps">On </a></li>
    <li><a href="/vings/grocery-coupons">C</a></li>
    <li><a href="/vings/grocery-offers">Em</a></li>
    <li><a href="/vings/grocery-sweepstakes">P</a></li>
    <li><a href="/vings/meal-deals">W</a></li>
    <li><a href="/vings/pc">Pet</a></li>
    <li><a href="/vings/price-chopper-fuel-advantedge">Fuel</a></li>
    <li><a href="/vings/school-vings-program">School</a></li>
    <li><a href="/vings/weekly-flyer">Weekly</a></li>
</ul>
</div>

我希望能够单击类别 +-，它将显示/隐藏其下方的所有链接。与我正在处理第三级的 category3 中的 subcategory1 相同。我如何才能一直执行到第 3 级？

我应该在所有链接之前加上 L1、L2、L3 标签吗？我查看了一些处理 +/- 符号和实现的问题，但我不太了解。

另外，我将如何实现一个在切换时显示全部或展开全部的按钮？也就是说，它会扩展到最深的级别并折叠回仅显示级别 1 的类别。

如果您可以在任何地方开始我自己的学习，那也将不胜感激。这是我的第一个项目，我不知道从哪里开始。

Answer 1

您需要从考虑您的 HTML 结构开始。您将需要某种嵌套元素来表达列表。我建议使用嵌套的 <ul> 元素，因为它在语义上代表了您的数据结构。

不用担心有多少关卡；如果你做得对，相同的代码将适用于任何级别的可折叠元素。

您实际上需要完成三个任务：知道何时单击树元素、查找其子元素以及切换它们的可见性。

您可以使用 jQuery 的 .click() 处理程序来确定单击元素的时间。但是要小心：例如，如果您有嵌套的 <li> 元素，并且您使用 $('li').click 作为您的事件，您将捕获子元素的多次点击（因为它们也会触发其父元素的 click 事件)。所以你必须对你的选择器有点聪明。

一旦您能够检测到点击，您就可以使用 jQuery 的.children() 函数找到任何子项。

最后，切换子元素的可见性很简单，您可以使用 jQuery 的 .toggle() 函数轻松完成。

最后，我同意 Josh 评论的观点：为什么要重新发明轮子？如果您这样做是为了学习，那很好，您可以使用我在此答案中概述的方法。如果您只是需要它，您应该考虑使用现有的 jQuery 扩展，例如 Josh 建议的 Accordion 或 jQuery Treeview。

Answer 2

虽然我通常建议在继续使用 jQuery 之前完全掌握 javascript，但后者在这里提供了更简单的解决方案。

看看.toggle()

编辑：Josh 的建议不错，但可能值得事先掌握构建更简单的版本。

Answer 3

这是一个非常简单的例子http://jsfiddle.net/xNh6R/4/

Javascript：

$('.level1').click(function(){
    if($(this).next('div').is(':visible')){
        $(this).next('div').hide("blind");
    } else {
        $(this).next('div').show("blind");
    }
});

$('.level2').click(function(){
    if($(this).next('div').is(':visible') && $(this).next('div').hasClass("level3")){
        $(this).next('div').hide("blind");
    } else if($(this).next('div').hasClass("level3")) {
        $(this).next('div').show("blind");
    }
});​