用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.这个区域需要关闭按钮,同时我需要写绑定事件,关闭的时候让这块区域 ...
随机推荐
- 一对一关联查询注解@OneToOne的实例详解
表的关联查询比较复杂,应用的场景很多,本文根据自己的经验解释@OneToOne注解中的属性在项目中的应用.本打算一篇博客把增删改查写在一起,但是在改的时候遇到了一些问题,感觉挺有意思,所以写下第二篇专 ...
- 在 iOS 上编译 webkit 源码
准备工作 买一台 mac 下载并安装 Xcode 下载源码 git clone git://git.webkit.org/WebKit.git WebKit 这个可能要耗费很久很久 编译源码 打开 X ...
- NSTimer、performSelector 函数没有被调用的原因
performSelector 指定的方法没有被调用 Invokes a method of the receiver on the current thread using the default ...
- Python小白学习之路(十一)—【局部变量和全局变量】【关键字global】【关键字nonlocal】
写在前面: 几乎有一周没有更新学习笔记了吧 上周一周身体都不怎么舒服 然后还得写开题报告 然后还得看文献 天天就是写写写写写写~~~~~~改改改改改改~~~~~~~~~ 今天又开始学习了 希望之前的没 ...
- iOS下载图片失败
一.具体问题 开发的过程中,发现某个界面部分图片的显示出现了问题只显示占位图片,取出图片的url在浏览器却是能打开的,各种尝试甚至找同行的朋友帮忙在他们项目里展示都会存在问题,最终发现通过第三方框架S ...
- 【mNOIP模拟赛Day 1】 T2 数颜色
题目传送门:https://www.luogu.org/problemnew/show/P3939 题外话:写完这题后本地跑了下极限数据,用时1.5s,于是马上用fread+fwrite优化至0.3s ...
- DIV+CSS 按比例等分
div { display: inline-block; /* 如需支持IE8以下版本,用浮动来做 */ width: calc(100% / 3.09); /* 此处运用了一个css3的表达式,将d ...
- Numpy 数组的切片操作
实例+解释如下(表格):关键是要明白python中数组的下标体系.一套从左往右,一套从右往左. 1 import numpy as np 2 import sys 3 4 def main(): 5 ...
- js的基础知识笔记
目录 一.基本数据类型 二.函数 三.面向对象 一.基本数据类型 1.使用var声明变量.使用;结尾.使用{}表示代码块.使用驼峰式命名 2.变量是弱类型的,即并不严格要求声明变量的类型,一个变量可以 ...
- android Service 学习总结
学习android开发已经四五个月,由于项目中职责的原因一直没有接触过Service的实际项目,今天重新学一遍Service用法. 问题: 作为四大组件,为什么需要Service? 它与Thread又 ...