jquery tree 可编辑节点实现代码（jquery一句话节点菜单）

下面的代码。大家可以研究下，对于jquery的学习还是非常有好处的。
锋利的jquery中的一句话代码，实现的菜单

运行后，需要刷新下（因为是调用的外地jquery）

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>1-5-1</title> <style type="text/css"> #menu { width:300px; } .has_children{ background : #555; color :#fff; cursor:pointer; } .highlight{ color : #fff; background : green; } div{ padding:0; } div a{ background : #888; display : none; float:left; width:300px; } </style><script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript"> //等待dom元素加载完毕. $（function（）{ $（".has_children"）.click（function（）{$（this）.addClass（"highlight"）.children（"a"）.show（）.end（） .siblings（）.children（"a"）.hide（）.removeClass（"highlight"） }）}）; </script> </head> <body> <span>第1章-认识jQuery</span> 1.1-JavaScript和JavaScript库 1.2-加入jQuery 1.3-编写简单jQuery代码 1.4-jQuery对象和DOM对象 1.5-解决jQuery和其它库的冲突 1.6-jQuery开发工具和插件 1.7-小结 <span>第2章-jQuery选择器</span> 2.1-jQuery选择器是什么 2.2-jQuery选择器的优势 2.3-jQuery选择器 2.4-应用jQuery改写示例 2.5-选择器中的一些注意事项 2.6-案例研究——类似淘宝网品牌列表的效果 2.7-还有其它选择器么？ 2.8-小结 <span>第3章-jQuery中的DOM操作</span> 3.1-DOM操作的分类 3.2-jQuery中的DOM操作 3.3-案例研究——某网站超链接和图片提示效果 3.4-小结 </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

运行后，需要刷新下（因为是调用的外地jquery）

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <style type="text/css"> li{ text-indent: 10px; margin-left: -20px; padding-top: 0px; list-style: none; } .oline{ background-image: url（treeview-default-line.gif）; background-position: 7px 18px; background-repeat: no-repeat; } .lline{ background-image: url（L.gif）; background-position: 7px 18px; background-repeat: no-repeat; } .expand{ background-image: url（minus.gif）; background-repeat: no-repeat; background-position: left; } .colpse{ background-image: url（plus.gif）; background-repeat: no-repeat; background-position: left; } label{ padding-left: 15px; padding-top: -5px; } .leaf{ background-image: url（L.gif）; background-repeat: no-repeat; background-position: left; } input{ border: 1px solid #CCC; } </style> </head> <body> <ol> <li > <label>A</label> <ol > <li > <label>A-1</label> <ol> <li > <label>A-1-1</label> <ol> <li > <label>A-1-1-1</label> <ol> <li > <label>A-1-1-1-1</label> </li> </ol> </li> </ol> </li> <li > <label>A-1-1</label> <ol> <li > <label>A-1-1-1</label> <ol> <li > <label>A-1-1-1-1</label> </li> </ol> </li> </ol> </li> <li > <label>A-1-1</label> <ol> <li > <label>A-1-1-1</label> <ol> <li > <label>A-1-1-1-1</label> </li> </ol> </li> </ol> </li> </ol> </li> <li > <label>B-1</label> <ol> <li > <label>B-1-1</label> <ol> <li > <label>B-1-1-1</label> <ol> <li > <label>B-1-1-1-1</label> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </body> </html> <script type="text/javascript"> $（"li:has（ol）>label"）.addClass（"colpse"）; $（"ol>li:not（:only-child）"）.addClass（"oline"）; $（"ol>li:only-child"）.addClass（"lline"）; $（"ol>li:last-child"）.addClass（"lline"）; $（"li:has（ol）>label"）.toggle（ function（）{ $（this）.removeClass（）; $（this）.addClass（"colpse"）; $（"+ol",this）.children（）.slideUp（100）; }, function（）{ $（this）.removeClass（）; $（this）.addClass（"expand"）; $（"+ol",this）.children（）.slideDown（100）; } ）; $（"li:has（ol）>label"）.click（）; $（"label:not（:has（ol））"）.dblclick（function（）{ $（this）.hide（）; $（this）.before（"<input type="text" value=""+$（this）.html（）+""/><input type="button" value="add"/>"）; $（":button"）.click（function（）{ $（this）.prev（）.hide（）; $（this）.hide（）; $（this）.next（）.html（$（this）.prev（）.val（））; $（this）.next（）.show（）; }）; }）; </script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]