Я использую комбинацию меню Wayfinder и Accordion для управления поведением меню в левой колонке. Это меню имеет два уровня, т.е .:JQuery, Accordion & multiple menus
<ul class="accordion">:
Menu 1
Sub-menu 1.1
Sub-menu 1.2
Sub-menu 1.3
Menu 2
Sub-menu 2.1
Sub-menu 2.2
Menu 3
Sub-menu 3.1
Sub-menu 3.2
Menu 4
Sub-menu 4.1
Sub-menu 4.2
Существует также следующее меню заголовка:
<ul class="nav"> (no sub-menus):
Menu 2
Menu 3
Код ниже ручки меню в левой колонке («гармошка» класс). Я хотел бы расширить код, поэтому нажатие на «Меню 2» из меню заголовка (класс «nav») будет иметь тот же эффект, что и нажатие на «Меню 2» (класс «аккордеон»). То есть нажатие на «Меню 2» (класс «nav») расширит «Меню 2» классом «аккордеон».
Hers это код:
<script type="text/javascript">
$(document).ready(function() {
// Store variables
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu'),
nav_head = $('.nav > li > a');
// Open the first tab on load
accordion_head.eq(2).addClass('active').next().slideDown('normal');
// Click function
accordion_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the tabs on click
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
else {
accordion_body.slideUp('normal');
accordion_head.removeClass('active');
}
});
nav_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the 'accordion tabs' on click on the 'nav tabs'
<missing part>
});
});
</script>
Большое спасибо, LG
Просьба вставить полную, но упрощенную структуру HTML –
элементы с классом nav - это всего лишь подмножество элементов из класса аккордеона. –
верьте мне, иногда, когда вы вставляете HTML, мы можем предложить более разумное решение вместо добавления ошибок к существующим, из-за вашего вопроса я уже вижу все, что вам нужно, это пара строк jQuery. –