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

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

查看.toggle()

编辑：Josh的建议很好，但事先建立更简单的版本可能值得一试。

Answer 2

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

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

你真的有三个任务：知道点击树元素的时间，找到它的子节点，以及切换它们的可见性。

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

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

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

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

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");
    }
});

Jquery扩展和折叠功能

3 个答案: