JQuery меню аккордеона, построенное с использованием таблиц

Question

Как и название говорит ... Мне нужна помощь в создании лучшего гармонического меню с анимацией jquery. Тем не менее, меню построено с использованием таблиц, и у меня нет доступа к HTML. Вот что я до сих пор, но я не доволен результатом (это слишком рывком).

jq16 = jQuery.noConflict(true); 
jq16(document).ready(function(){ 
    jq16("td.categorySidebar table tr").each(function() { 
     //IE fix - get all tr and rebuild to end of table 
     jq16(this).appendTo("td.categorySidebar table tbody"); 
     //get all level1 td 
     if(jq16(this).children().hasClass('categorySidebarLabelLevel1')) { 
      //add same td class to parent tr and apply show function 
      jq16(this).addClass(jq16(this).children().attr('class')); 
      //add hover to level1 tr 
      jq16(this).hover(
       function(){ 
       if(jq16(this).hasClass('categorySidebarLabelSelected') 
       || jq16('> td table tr td',this) 
        .hasClass('categorySidebarLabelSelected')) { 
         return false; 
        } else { 
         jq16('> td table',this).stop(true, true).toggle(); 
        } 
       } 
      ); 
     } 
    }); 
    //on document load build table of sub-levels and check to see 
    // what is selected to show/hide 
    jq16("td.categorySidebar table tr[class^='categorySidebarLabelLevel1']") 
    .each(function(k,v) { 
    //wrap the sub-levels in table and hide 
     var subCat = jq16(this).nextUntil("[class^='categorySidebarLabelLevel1']") 
      .wrapAll('<table style="display: none;" ><tbody></tbody></table>'); 
     //Append table of sub-levels to level1 td so we can apply hover function 
     jq16(subCat).parent().parent().appendTo(jq16(this).children('td')); 
     //Check level1 to see if it is selected 
     if(jq16(this).hasClass('categorySidebarLabelSelected')) { 
      jq16(this).children().children().show(); 
     } 
     //check each sub-level to see if it is selected 
     jq16(subCat).each(function() { 
      if(jq16(this).children().hasClass('categorySidebarLabelSelected')) { 
       jq16(this).parent().parent().show(); 
      } 
     }); 
    }); 
}); 

http://jsfiddle.net/u1unzpzs/2/

Answer 1

Рассматривали ли вы с помощью fadeToggle вместо только toggle?

Try:

jq16('> td table', this).stop(true, true).fadeToggle("slow", "linear"); 

вместо:

jq16('> td table', this).stop(true, true).toggle(); 

http://jsfiddle.net/u1unzpzs/7/

Answer 2

Вы можете достигнуть эффекта гармошки с помощью CSS переходов:

table, tr, td { 
    display:block; 
} 
table table table { 
    max-height: 0; 
    overflow: hidden; 
    -webkit-transition: max-height 0.8s; 
    -moz-transition: max-height 0.8s; 
    transition: max-height 0.8s; 
} 
table.open { 
    max-height: 200px; /* should be taller than largest sub table */ 
} 

в й toggleClass:

jq16('> td table', this).toggleClass('open'); 

Example