1

我是 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 的类别。

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

4

3 回答 3

1

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

看看.toggle()

编辑：乔希的建议是一个很好的建议，但可能值得事先掌握构建更简单的版本。

于 2012-09-06T19:53:00.393 回答
1

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

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

您将真正完成三个任务：了解何时单击树元素、查找其子元素以及切换它们的可见性。

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

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

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

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

于 2012-09-06T20:19:10.263 回答
0

这是一个非常简单的例子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");
    }
});​
于 2012-09-06T20:59:31.630 回答