jquery简单实现树形结构收缩展开效果

代码量很少，注意要取消冒泡 e.stopPropagation();

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title></title><style type="text/css">.child{ display: none;}li{ cursor: pointer;}</style><script src="ajaxDomain/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">$(function(){$("li").click(function(e){e.stopPropagation();var childs=$(this).children(".child");if(childs.is(":hidden")){childs.slideDown();}else{childs.slideUp();}})})</script></head><body><ul><li>这是第一行<ul class="child"><li>第一行子行<ul class="child"><li>三级？<ul class="child"><li>还有！？<ul class="child"><li>坑爹！？</li><li>坑爹！？</li><li>坑爹！？</li></ul></li><li>还有！？</li><li>还有！？</li></ul></li></li><li>三级？</li><li>三级？</li><li>三级？</li><li>三级？</li></ul></li><li>第一行子行</li><li>第一行子行</li><li>第一行子行</li></ul></li><li>这是第二行<ul class="child"><li>坑爹！？</li><li>坑爹！？</li><li>坑爹！？</li></ul></li><li>这是第三行</li></ul></body>
</html>

转载于:https://www.cnblogs.com/lihui1030/p/3829240.html

jquery简单实现树形结构收缩展开效果相关推荐

使用RecyclerView 简单实现QQ好友列表展开效果
最近自己想捣鼓个社交类的app,所以想了解一下QQ列表的实现.对于这样的展开效果,我们很容易想到使用ExpandableListView类,当然我也是,但是我在网上看到有人用ListView套用lis ...
js生成简单的树形结构_思维干货收藏，“决策树”一种可视化决策的简单方法...
今天来介绍一种决策可视化的模型,作为质量人特别是在呈现质量问题解决和质量数据分析时都会应用到,这里通过网络我收集了下面这篇文章分享给大家,一起交流和学习,希望能给你带来帮助,同时分享你的建议和意见. ...
众筹网站项目第七天之zTree树形结构实现(2)
打开原教程视频注:本人是渣渣,有错请谅解. 许可维护页面的zTree树形结构实现实现效果: 实现过程 1.数据准备在数据库中插入相应的数据 insert into `t_permission` ...
html树状结构怎么展开,纯css实现树形结构
纯css实现属性结构 **css实现属性结构的思路是利用伪类实现树形结构连接线,如果想实现点击展开和收缩以及复选框效果还得配合js来实现.其实展开和收缩就是一个点击元素其子元素隐藏和显示的切换.* ...
ztree和php结合实例,实例详解jQuery EasyUI结合zTree树形结构制作web页面
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,z ...
jQuery 设计和自定义一个带展开动画效果的导航栏
设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码完成一个完全自己设计的导航栏 ...
elementUI中el-table树形与el-tree树形结构的一键折叠与展开
elementUI中el-table树形与el-tree树形结构的一键折叠与展开 1.业务需求: vue项目,权限菜单管理中菜单table的树形结构,一般情况下如果使用的是elementUI那么可以使 ...
el-table树形数据全部展开和收缩（toggleRowExpansion）
本文主要讲根据element-ui文档的toggleRowExpansion实现el-table树形数据全部展开和收缩 1.页面效果 2.HTML页面展示树形数据:直接使用element-ui的de ...
关于element tree树形结构设置默认展开第一级，第二级，第三级，以此类推
官方default-expand-all是否默认展开所有节点,这个在这里已经不够用了. 第一步:设置node-key属性,每个树节点用来作为唯一标识的属性,整棵树应该是唯一的.例如:node-key= ...

jquery简单实现树形结构收缩展开效果

jquery简单实现树形结构收缩展开效果相关推荐

最新文章

热门文章