我是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级类别。
如果您有任何我可以自己开始学习的地方,那也非常感激。这是我的第一个项目,我对从哪里开始感到困惑。
答案 0 :(得分:1)
答案 1 :(得分:1)
您首先要考虑HTML结构。您需要某种嵌套元素来表达列表。我建议使用嵌套的<ul>
元素,因为它在语义上代表了您的数据结构。
不要担心有多少级别;如果你做得对,相同的代码将适用于任何级别的可折叠元素。
你真的有三个任务:知道点击树元素的时间,找到它的子节点,以及切换它们的可见性。
您可以使用jQuery的.click()处理程序来确定何时单击该元素。但是要小心:例如,如果您有嵌套的<li>
元素,并且使用$('li').click
作为事件,则会为子元素捕获多次点击(因为它们也会触发其父元素click
事件)。因此,您必须对选择器有点聪明。
一旦你能够检测到点击,你就可以使用jQuery的.children()功能找到任何子项。
最后,切换子元素的可见性很简单,使用jQuery的.toggle()函数可以轻松完成。
最后,我同意Josh评论的观点:为什么重新发明轮子?如果你正在学习,那很好,你可以使用我在这个答案中概述的方法。如果您只是需要它,您应该考虑使用现有的jQuery扩展,例如Josh建议的Accordion或jQuery Treeview。
答案 2 :(得分: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");
}
});