У меня есть 3-х уровневое меню на моей странице. Когда ссылка нажата на любом уровне, аккордеон все еще открыт, и соответствующая страница открывается с правой стороны. ссылка на Woking
В настоящее время я использую JQuery и XSLT. Он поддерживает три уровня, теперь я должен изменить его на 5 уровне. Хотя текущая реализация работает, ее бит усложняется. Поэтому я хотел бы знать, если кто-то реализовал то же самое.
Ссылки и заголовки передаются через XSLT из CMS и JQuery.
<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, который выкован из ваших с моими изменениями. Надеюсь, это поможет:)
Звучит так, как будто вы пытаетесь создать вложенный аккордеон.
С помощью 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 (см. демонстрацию здесь)