tree

最新推荐文章于 2022-04-27 11:55:42 发布

APG-W

最新推荐文章于 2022-04-27 11:55:42 发布

阅读量487

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sinatAPGW/article/details/50843545

本文介绍了一种使用jQuery实现的树状菜单的折叠与展开功能。通过为每个具有子菜单项的列表项添加'parent_li'类，并利用jQuery的选择器和事件处理功能，实现了点击父级菜单项时子菜单的显示与隐藏切换效果。此外，还通过修改图标和提示文字增强了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});