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

正如标题所说……我需要帮助用jquery动画构建更好的手风琴菜单。但是，菜单是使用表格构建的，我没有访问HTML的权限。这是我到目前为止得到的结果，但我对结果不满意（太不稳定了）

jq16=jQuery.noConflict（true）；
jq16（文件）.准备就绪（功能（）{
jq16（“td.categorySidebar表tr”）。每个（功能（）{
//IE修复-获取所有tr并重建到表的末尾
jq16（本）.附录（“td.categorySidebar table tbody”）；
//获得所有级别1 td
if（jq16（this）.children（）.hasClass（'categorySidebarLabelLevel1'））{
//将相同的td类添加到父tr并应用show函数
jq16（this）.addClass（jq16（this）.children（）.attr（'class'））；
//将悬停添加到level1 tr
jq16（这个）。悬停(
函数（）{
if（jq16（this）.hasClass（'categorySidebarLabelSelected'））
||jq16（'>td表tr td'，本）
.hasClass（'categorySidebarLabelSelected'））{
返回false；
}否则{
jq16（'>td table'，this）.stop（true，true.toggle（）；
}
}
);
}
});
//在文件上加载子级别的构建表并检查以查看
//选择要显示/隐藏的内容
jq16（“td.categorySidebar表tr[class^='categorySidebarLabelLevel1']））
.每个功能（k，v）{
//将子级别包装到表中并隐藏
var subCat=jq16（this）.nextUntil（“[class^='categorySidebarLabelLevel1']”）
.wrapAll（“”）；
//将子级别表附加到level1 td，以便我们可以应用悬停函数
jq16（subCat）.parent（）.parent（）.appendTo（jq16（this）.children（'td'））；
//检查level1以查看是否选中了它
if（jq16（this）.hasClass（'categorySidebarLabelSelected'））{
jq16（this.children（）.children（）.show（）；
}
//检查每个子级别以查看是否选中了它
jq16（子类别）。每个（功能（）{
if（jq16（this）.children（）.hasClass（'categorySidebarLabelSelected'））{
jq16（this.parent（）.parent（）.show（）；
}
});
});
});

---

您是否考虑过使用

fadeToggle

而不是单独使用

切换

尝试：

而不是：

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

---

您可以通过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 */
}

和切换类：

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

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 */
}

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