Jquery展開和摺疊功能

我是jquery/javascript的新手，我自己有一堆鏈接，我需要整理到可擴展和可通過+/-按鈕摺疊的鏈接。Jquery展開和摺疊功能

的我一起工作的信息的一個例子是：

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中的子類別1一樣。我將如何能夠實現一直到第3級？

我是否應該在所有與L1，L2，L3標籤的鏈接之前？我已經看過一些處理+/-符號和實現的問題，但我不太瞭解它。

此外，我將如何去實現一個按鈕，顯示全部或全部展開切換？也就是說，它會擴大到最深層次並倒退，只顯示一級類別。

如果你有任何我可以自己開始學習的地方，那也將不勝感激。這是我的第一個項目，我對從哪裏開始感到困惑。

來源

2012-09-06 tf.rz

參見jQueryUI的的[手風琴]（http://jqueryui.com/demos/accordion/）。 – Josh

@Josh謝謝你的鏈接。我正在使用visual studio（web）。如何去測試與網頁的JavaScript？ –

您將首先考慮您的HTML結構。你需要一些嵌套元素來表達列表。我建議使用嵌套的<ul>元素，因爲它在語義上表示您的數據結構。

不要擔心有多少層次;如果你做得對，相同的代碼將適用於任何級別的可摺疊元素。

你真的有三項任務：知道何時點擊樹元素，找到它的子元素，並切換其可見性。

您可以使用jQuery的.click()處理程序來確定何時單擊該元素。但要小心：例如，如果嵌套<li>元素，並且使用$('li').click作爲事件，則會捕獲多個子元素的點擊（因爲它們也將觸發其父項的click事件）。所以你必須對你的選擇器有一點聰明。

一旦你能夠檢測到點擊，那麼你可以通過使用jQuery的.children()函數找到任何子項。

最後，切換子元素的可見性很簡單，您可以使用jQuery的.toggle()函數輕鬆完成這些操作。

最後，我同意喬希評論的觀點：爲什麼重新發明輪子？如果你正在學習，那很好，你可以使用我在這個答案中概述的方法。如果你只是需要它，你應該考慮使用現有的jQuery擴展，如喬希的建議Accordion或jQuery Treeview。

來源

2012-09-06 20:19:10

感謝您的詳細解答！請參閱編輯，我已經發布了一些關於我的代碼結構的代碼。問題是，我不知道如何使用現有的jQuery擴展。我想要類似於示例2 - jQuery Treeview中的導航。我需要做些什麼來設置自己的導航？謝謝！ –

首先下載jQuery Treeview（http://bassistance.de/jquery-plugins/jquery-plugin-treeview/），然後查看一些示例。看代碼...這很簡單。 –

很酷，非常感謝！ –

雖然我通常建議在開始使用jQuery之前完全掌握javascript，但後者提供了一個更簡單的解決方案。

看看.toggle()

編輯：Josh的建議是一個很好的一個，但它可能是值得得到認真處理事先建立簡單的版本。

來源

2012-09-06 19:53:00 matthewjewell

這裏是一個非常簡單的例子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-06 20:59:31 Jlange

Jquery展開和摺疊功能

回答

相關問題