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

你可以用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

Answer 2

您是否考虑过仅使用fadeToggle代替toggle？

尝试：

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

而不是：

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

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

使用表格构建的Jquery手风琴菜单

2 个答案: