用Jquery去写树结构
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>Tree Menu</title>
</head>
<body>
<divclass="lmenu">
<ul>
<liaid="26">
<span> <emclass="icoopen"></em>
一级标题
</span>
<ulstyle="display: none;">
<liaid="27"> <emclass="iconleaf"></em>
二级标题
</li>
<liaid="28">
<emclass="iconleaf"></em>
二级标题
</li>
<liaid="29">
<emclass="iconleaf"></em>
二级标题
</li>
</ul>
</li>
<liaid="1">
<span>
<emclass="icoclose"></em>
一级标题
</span>
<ulstyle="display: block;">
<liaid="4">
<emclass="iconleaf"></em>
二级标题
</li>
<liaid="2">
<emclass="iconleaf"></em>
二级标题
</li>
<liaid="8">
<span>
<emclass="icoclose2"></em>
二级标题
</span>
<ul>
<liaid="10">
<emclass="iconleaf2"></em>
三级标题
</li>
<liaid="3">
<emclass="iconleaf2"></em>
三级标题
</li>
</ul>
</li>
<liaid="5">
<span>
<emclass="icoclose2"></em>
二级标题
</span>
<ul>
<liaid="7">
<emclass="iconleaf2"></em>
三级标题
</li>
<liaid="6">
<emclass="iconleaf2"></em>
三级标题
</li>
</ul>
</li>
</ul>
</li>
<liaid="11">
<span>
<emclass="icoclose"></em>
一级标题
</span>
<ul>
<liaid="17">
<span>
<emclass="icoclose2"></em>
二级标题
</span>
<ul>
<liaid="25">
<emclass="iconleaf2"></em>
三级标题
</li>
<liaid="23">
<emclass="iconleaf2"></em>
三级标题
</li>
<liaid="22">
<emclass="iconleaf2"></em>
三级标题
</li>
</ul>
</li>
<liaid="12">
<span>
<emclass="icoclose2"></em>
二级标题
</span>
<ul>
<liaid="15">
<emclass="iconleaf2"></em>
三级标题
</li>
<liaid="16">
<emclass="iconleaf2"></em>
三级标题
</li>
<liaid="14">
<emclass="iconleaf2"></em>
三级标题
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<style>
*{
margin: 0;
padding: 0;
}
.icoopen , .icoopen2 , .icoclose , .icoclose2 , .iconleaf , .iconleaf2 ,.lmenuullispan ,.search-sidebutton{background: url("doc.png") no-repeat00;width: 9px;height: 9px;top: 9px;}
.lmenuli{list-style: none;}
.lmenuem {display: block;position: absolute;cursor: pointer;}
.icoopen{left: 28px;background-position: 0-39px;}
.icoopen2{left: 42px;background-position: -46px-88px;}
.icoclose{left: 28px;background-position: -45px-39px;}
.icoclose2{left: 42px;background-position: 0-88px;}
.iconleaf , .iconleaf2{width: 3px;height: 5px;background-position: -87px-41px;}
.iconleaf {left: 47px;top: 11px;}
.iconleaf2 {left: 72px;top: 10px;}
.search-side{
width: 250px;
border-radius: 5px;
position: relative;
background-color: #FFFFFF;
border: 1pxsolid#ddd;
height: 36px;
line-height: 36px;
}
.search-sidebutton{
background-position: 00;
border: 0none;
cursor: pointer;
display: block;
height: 16px;
width: 16px;
position: relative;
left: 11px;
}
.search-boxinput{
position: absolute;
top: 11px;
background-color: transparent;
border: mediumnone;
color: #AFB0B0;
height: 16px;
margin-left: 37px;
outline: mediumnone;
width: 200px;
}
.lmenu{
width: 250px;
height: auto;
overflow: hidden;
font-family: "宋体",Tahoma, Helvetica, "Microsoft Yahei", "微软雅黑", Arial, STHeiti;
margin-bottom: 10px;
border: 1pxsolid#ddd;
border-radius: 5px;
}
.lmenuulli{
position: relative;
cursor: pointer;
}
.lmenuulliul{
max-height: 350px;
overflow: auto;
}
.lmenuulliulliul{
height: auto;
}
.lmenuullispan{
display: block;
width: 100%;
height: 28px;
line-height: 28px;
text-indent: 3em;
/*font-weight: bolder;*/
font-size: 14px;
color: #0E3E5E;
border-bottom: 1pxsolid#D7D7D7;
background-position: -46px0;
}
.lmenuulliulli , .lmenuulliullispan{
/*background-color: #F7F8F8;*/
background-color: #FFFFFF;
color: #333;
text-indent: 5em;
font-size: 13px;
height: auto;
line-height: 28px;
}
.lmenuulliullispan{
background:none;
}
.lmenuulliulliulli{
border:none;
text-indent: 7em;
font-size: 12px;
font-weight: normal;
height: 24px;
line-height: 24px;
}
</style>
<scripttype="text/javascript"src="jquery-3.2.1.js"></script>
<script>
$(function() {
loadMenu(function (id){
// window.location= "";此处指定关于aid的链接
});
});
/*传入一个函数参数为 id 即li上的属性 aid*/
functionloadMenu (fun_clickAction) {
/*事件回调函数*/
clickAction = fun_clickAction;
/*一级菜单的样式*/
$(".lmenu > ul > li > span").prepend('<em class="icoclose"></em>');
/*二级菜单的样式*/
$(".lmenu > ul > li > ul > li").each(function(){
/*检查是否有节点*/
span =$(this).find("span");
if ( span.length ){
//有节点的话
span.prepend('<em class="icoclose2"></em>');
}else{
//无节点的话,绑定事件
$(this).prepend('<em class="iconleaf"></em>')
.click(function(){
clickAction($(this).attr('aid'));
});
}
});
/*三级菜单的样式*/
$(".lmenu > ul > li > ul > li > ul > li")
.prepend('<em class="iconleaf2"></em>')
.click(function(){
clickAction($(this).attr('aid'));
});
$(".lmenu ul li span").click(function(){
var ye =$(this).find('em');
classNama = ye.attr("class");
if( classNama =='icoclose'){ye.attr('class','icoopen');}
elseif( classNama =='icoopen' ){ye.attr('class','icoclose');}
elseif( classNama =='icoclose2'){ye.attr('class','icoopen2');}
elseif( classNama =='icoopen2' ){ye.attr('class','icoclose2');}
$(this).siblings("ul").slideToggle("normal","swing");
});
}
</script>
</body>
</html>
用Jquery去写树结构的更多相关文章
- Jquery 随便写些知识点
针对jQuery随便写些觉得还挺实用的一些东西,也没系统的去理一番,只是想到哪写到哪,写的不完全也请多见谅. jQuery和其他javascript库产生$符号冲突了?$符号想必用jQuery的人都不 ...
- 用node.js从零开始去写一个简单的爬虫
如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...
- JQuery去实现校验用户名
JQuery 是什么? javascript 的代码框架. 有什么用? 简化代码,提高效率. 核心 write less do more , 写得更少,做的更多. load //找到这个元素, 去执行 ...
- 如果简单的记录,就可以为这个世界创造更多的财富,那么还有什么理由不去写博客呢? — 读<<黑客与画家>> 有感
上一次博文发文时间是2016.1.15,7个月已经过去了.最近读了一本<>的书,对我触动挺大的!里面有关于技术趋势的探讨,也有关于人生和财富的思考! 开始更新iOS122的文章的初衷是,聚 ...
- 【转载】这样去写你的HTML
昨天在 twitter 上说,怎么忍心把页面写得这么难用?是的,这个世界还有一群人等着我们创建出来的东西,可以让他们的生活能过得更容易呢.比如那些需要读屏软件的用户.作为一个前端,我们又怎么会忍心呢. ...
- ***使用jQuery去封装插件（组件化、模块化的思想），即扩展方法
如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){} ②使用:$.方法(有参数的 ...
- 如何在嵌套的app中运用vue去写单页面H5
本文主要介绍移动端.为了避免移动端兼容出现各种奇奇怪怪的bug,所以秉承着能不用复杂的语法就不用,尽量用最基础的语法. 可用惯了各种ES6语法的童鞋们,写原生真是头疼,再加上各种领导催工期,肯定是内心 ...
- jquery 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动
首先我们看两个连写注释 第一个: /* 点击头像,显示基本资料 */ $(".f-chatTit a.avatar").click(function(){ $(this).hi ...
- jquery 手写一个简单浮窗的反面教材
前言 初学jquery写的代码,陈年往事回忆一下. 正文 介绍一下大体思路 思路: 1.需要控制一块区域,这块区域一开始是隐藏的. 2.这个区域需要关闭按钮,同时我需要写绑定事件,关闭的时候让这块区域 ...
随机推荐
- ACTIVEMQ监控项目admin队列详情中文乱码
一.使用ACTIVEMQ队列,传入ObjectMessage时,监控项目admin无法解析消息信息,需要将消息javabean打成jar放入lib文件夹中,重启ACTIVEMQ,注意javabean要 ...
- Spring 事务传播行为实验
一.Propagation : key属性确定代理应该给哪个方法增加事务行为.这样的属性最重要的部份是传播行为.有以下选项可供使用: PROPAGATION_REQUIRED--支持当前事务,如果当前 ...
- Fast Newman-FN算法以及模块度定义介绍
一.社区的定义 Newman第一次提出模块度定义就是在2004年发表的这篇文章“fast algorithm for community structure in networks”,第一次用量化的公 ...
- [经验]微信开放平台，一个APP secret可以绑定一个APP,然后再绑定一个ipad 版本APP
微信开放平台,一个APP secret可以绑定一个APP,然后再绑定一个ipad 版本APP
- 剑指offer二十五之复杂链表的复制
一.题目 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否 ...
- 安装Hive-0.10.0-CDH4.5.0所遇异常
Note: 虚拟机访问Win7中mysql(root用户+密码) hive出现异常1: FAILED: Error in metadata: java.lang.RuntimeException: U ...
- [转发] win8安装mindget mindmanger
win8安装mindget mindmanger 1安装MindManager时,显示安装Visual C++ 2005 Redistributable时报错 解决方法:1.把安装程序移动到没有 ...
- java开发编译器：中间语言格式
阅读博客的朋友可以到我的网易云课堂中,通过视频的方式查看代码的调试和执行过程: http://study.163.com/course/courseMain.htm?courseId=10028300 ...
- redis High Availability---Redis Sentinel翻译
注意,本文档为最新(11月21日),旧版本的可以参考:http://redis.io/topics/sentinel-old 不鼓励使用旧版本的文档. Redis Sentinel是一个用来管理Red ...
- chrome和IE下的滚动条样式修改
火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html&g ...