如何實現多層次的手風琴菜單

Question

我在我的頁面中有一個3級的手風琴菜單。當點擊任何級別的鏈接時，手風琴仍然打開，相應的頁面打開在右側。 Woking page link

目前我使用jQuery和對XSLT。它支持三個級別，現在我必須改變它5級。雖然目前的實施工作，但它有點複雜。所以我想知道，如果有人執行相同的。

鏈接和標題通過XSLT從CMS和Jquery獲得。

Answer 1

<ul class="accordion-menu"> 
    <li> 
     <a href="#" class="title">Explore Careers</a> 
     <ul> 
      <li><a href="#">Set Careers</a></li>  
      <li><a href="#">Salaries</a></li> 
     </ul> 
    </li> 
    <li class="active"> 
     <a href="#" class="title">Self assessments</a> 
     <ul> 
     <li> 
      <a href="#">What is an assessment?</a> 
     </li> 
      <li> 
      <a href="#" class="clicked">Interest assessment</a> 
      </li> 
      <li><a href="#">Skills assessment</a></li> 
      <li><a href="#">Work values</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#" class="title">Learn about careers</a> 
     <ul> 
     <li><a href="#">Licenses</a></li>  
     <li><a href="#">Professions</a></li> 
     </ul> 
    </li> 
</ul> 

我已經添加了一個新類title來識別手風琴標題，以避免使用慢子選擇器。在script

而現在，在這個live頁，你分享，他們刷新整個頁面以獲取更新的內容也添加此

$(document).ready(function(){ 

    $('.title').on('click',function(){ 
     var $parent = $(this).parent(); 
     var $siblings = $parent.siblings(); 
     $siblings.removeClass('active').find('ul').slideUp('normal'); 
     $parent.find('ul').slideDown('normal'); 
     $parent.addClass('active'); 
    });  

}); 

。我建議你使用AJAX來獲取更新的內容，然後更新該容器，而不是進行整頁刷新。這樣可以提供更好的用戶體驗，並使您更輕鬆地跟蹤選定的手風琴，而無需在頁面刷新之間保留狀態。

下面是更新後的fiddle與我的更改分開。希望這有助於:)

Answer 2

這聽起來好像你正在試圖建立一個嵌套手風琴。

使用jQuery工具（http://jquerytools.github.io/demos/tabs/accordion.html）你可以很容易地做到這一點。有一個小提琴（http://jsfiddle.net/Xanetia/8kz4m/），它演示它，所以它只是一個樣式的問題。

最大的區別到HTML的是，替代的結構，必須：

<ul> 
    <li> 
     <a href="#" class="title">Explore Careers</a> 
     <ul> 
     ... 
     </ul> 
    </li> 
    <li> 
     etc. 

您有：

<div class="accordion"> 
    <h2>Explore Careers</h2> 
    <div class="pane"> 
     <div class="accordion"> 
      <h2>Level 2 : 1</h2> 
      <div class="pane"> 
      </div> 
     </div> 
    </div> 
    <h2>Self assessments</h2> 
    <div class="pane"> 
     etc. 

替代解決方案：

您可能還需要看看this jquery plugin off jqueryscript.net（看演示here）