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

Ответ 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, который выкован из ваших с моими изменениями. Надеюсь, это поможет:)

Ответ 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.

Альтернативное решение:

Вы также можете посмотреть этот плагин jquery с jqueryscript.net (см. демонстрацию здесь)