Anidar las pestañas de la IU de JQuery en JQuery personalizado

Question

Estoy ejecutando un tema de Wordpress (Slate) y viene con códigos cortos que implementan pestañas con la tecnología de jquery.tabs.min.js.

Utilicé sus códigos cortos intenté anidar pestañas, y no funcionó, muy probablemente debido a la forma en que diseñaron los códigos cortos, así que creé jQuery simple y HTML adicional para crear áreas de pestañas anidadas, que luego contienen el tema original jquery pestañas códigos cortos.

Todo está funcionando, pero hay un problema que me confunde: cuando se cargan pestañas secundarias que contienen menos pestañas que las pestañas de las pestañas padre anteriores, se produce un desbordamiento de pestañas secundarias, y jQuery obtiene las pestañas secundarias del grupo anterior, anexándolas a la pestaña actual.

Un ejemplo de trabajo es here. Observe que la pestaña secundaria 'Actividades de deportes de invierno' del área Ejercicio también se carga en el área Vida nocturna, y Museos y atracciones turísticas en la pestaña principal Excursiones también se cargan en la pestaña primaria Calendrier, que solo debe contener 1 pestaña secundaria (Montreal Eventos).

Así que tengo un extraño derrame sobre el proceso ..
Mi código jQuery para principiantes para controlar las pestañas principales está a continuación.

$(function(){ 
    var subcat = $('.sub-categories'), 
     subdivfirst = $('.sub-categories div:first'), 
     subdiv = $('.sub-categories div'), 
     cattitlefirst = $('.categories ul li:first'), 
     cattitle = $('.categories ul li'); 

     subcat.children('div').hide(); 
     subdivfirst.show();  
     cattitlefirst.addClass('active'); 


     $('.categories li a').click(function(){ 
      var $this = $(this); 

      cattitle.removeClass('active'); 
      subcat.children('div').hide(); 

      $this.parent('li').addClass('active'); 

      var catLink = $this.attr('id'); 
      var showcat = $('div #sub-' + catLink); 

      showcat 
       .fadeIn(600)  
       .find('.panes').show() 
     }); 
}); 

Y cada uno de estos ".subcategories del div" a continuación contienen las fichas jQueryUI estándar.

Creo que debe haber algún tipo de conflicto entre las pestañas de jQueryUI y las pestañas caseras extra que he creado, pero no estoy seguro de cómo rastrearlas. Cualquier ayuda, consejo o idea para limpiar mi código sería muy apreciada.

Answer 1

¿Por qué no utilizar las pestañas de IU jquery estándar para las categorías y subcategorías? Puede agregar fácilmente clases personalizadas a ambas en css y automáticamente abre la primera pestaña en la subpestaña, o si usa cookies, abre la última pestaña que estaba abierta en ese archivo de mantenimiento.

lo que estaba pensando es algo así http://jsfiddle.net/3H33m

$(document).ready(function(){ 
    $('#Categories').tabs({ 
     show: { 
      effect: "fadeIn", duration: 600 
      } 
    }); 

    $('.sub-categories').tabs({ 
     show: { 
      effect: "fadeIn", duration: 600 
      } 
    }); 
}); 

Agregado sólo el contenido de primera y segunda categoría, y subpuntos a ellos. Los segundos subelementos de la categoría principal son básicamente copias desde el principio. También he alterado la estructura de HTML, pero solo porque quería poner elementos rápidamente a la izquierda y derecha. Debería funcionar con tu estructura también.