2013-04-02 8 views
0

Я использую комбинацию меню 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

+0

Просьба вставить полную, но упрощенную структуру HTML –

+0

элементы с классом nav - это всего лишь подмножество элементов из класса аккордеона. –

+0

верьте мне, иногда, когда вы вставляете HTML, мы можем предложить более разумное решение вместо добавления ошибок к существующим, из-за вашего вопроса я уже вижу все, что вам нужно, это пара строк jQuery. –

ответ

1

Target индекс щелкнули родительского элемента, как долго они находятся в том же порядке (после кнопки home)

$(function(){ 

    var accordion_head = $('.accordion > li > a'), 
     accordion_sub = $('.accordion li > .sub-menu'), 
     nav_head  = $('.nav > li > a'); 

    accordion_head.not('.active').on('click', function(e){ 
     e.preventDefault(); 
     if (!$(e.target).hasClass('active')){ 
      $('.accordion > li > a').removeClass('active'); 
      accordion_sub.slideUp(); 
      $(this).addClass('active').closest('li').find('.sub-menu').slideDown();  
    } 
    }); 

    nav_head.on('click', function(e){ 
     e.preventDefault(); 
     $('.accordion > li').eq($(this).closest('li').index()).find('a').click(); 
    }); 

});