使用表格构建的 Jquery 手风琴菜单
Jquery accordion menu built using tables
就像标题说的那样...我需要帮助使用 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/
您可以使用 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');
例
您是否考虑过使用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手风琴菜单与mmenu冲突-JQuery 1.4 vs 1.7
- 如何打开和折叠相同的JQuery手风琴只需点击它
- 在 jQuery 手风琴样式菜单中切换子项可见性
- Jquery 手风琴隐藏未活动的滑块
- jQuery 手风琴问题在这里
- Jquery手风琴与字体真棒切换
- Jquery手风琴html表显示了一个<tbody>内容
- 将window.scrollTo添加到简单的jQuery手风琴中
- 单击手风琴菜单外的链接时折叠jQuery手风琴
- jquery手风琴菜单不正确
- jQuery 手风琴选项卡不会关闭
- 将多个链接表映射到嵌套的JQuery手风琴
- 调整jQuery手风琴-打开所有选项卡
- Jquery手风琴在页面加载时折叠
- jquery手风琴切换的加号-减号
- 如何直接链接到 jQuery 手风琴选项卡
- JQuery:手风琴高度样式:填充导致垂直滚动条
- 同一页面中两个 jquery 手风琴的不同样式
- 有没有办法摆脱jQuery手风琴上的色调
- jquery 手风琴中的表