Как реализовать многоуровневое меню гармоник

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, добавьте

$(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'); 
    });  

}); 

Также в этом live страницы, которые вы совместно, они обновляя всю страницу, чтобы получить обновленное содержание. Я предлагаю вам использовать AJAX для получения обновленного контента, а затем обновить этот контейнер вместо обновления полной страницы. Это даст лучший пользовательский интерфейс, а также упростит отслеживание выбранного аккордеона без сохранения состояния между обновлениями страницы.

Вот обновленный fiddle раздвоенный с вашего с моими изменениями. Надеюсь, это поможет :)

Answer 2

Похоже, что вы пытаетесь построить вложенный аккордеон .

Использование jQuery Tools (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 (см. демо-версию)