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

更新时间：2009年11月02日 17:30:34 作者：

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> <div id="menu">     <div class="has_children">         <span>第1章-认识jQuery</span>         <a>1.1-JavaScript和JavaScript库</a>         <a>1.2-加入jQuery</a>         <a>1.3-编写简单jQuery代码</a>         <a>1.4-jQuery对象和DOM对象</a>         <a>1.5-解决jQuery和其它库的冲突</a>         <a>1.6-jQuery开发工具和插件</a>         <a>1.7-小结</a>     </div>     <div class="has_children">         <span>第2章-jQuery选择器</span>         <a>2.1-jQuery选择器是什么</a>         <a>2.2-jQuery选择器的优势</a>         <a>2.3-jQuery选择器</a>         <a>2.4-应用jQuery改写示例</a>         <a>2.5-选择器中的一些注意事项</a>         <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>         <a>2.7-还有其它选择器么？</a>         <a>2.8-小结</a>     </div>     <div class="has_children">         <span>第3章-jQuery中的DOM操作</span>         <a>3.1-DOM操作的分类</a>         <a>3.2-jQuery中的DOM操作</a>         <a>3.3-案例研究——某网站超链接和图片提示效果</a>         <a>3.4-小结</a>     </div> </div> </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需再刷新一下页面才能执行]

您可能感兴趣的文章:

jquery
tree

jquery中ajax跨域方法实例分析
这篇文章主要介绍了jquery中ajax跨域方法,结合实例分析了jQuery中使用getJSON及$.ajax实现ajax跨域的技巧,需要的朋友可以参考下
2015-12-12
基于jQuery制作小图标上下滑动特效
一个小图标特效，非常有趣的，下面给大家分享基于jquery制作的小图标上下滑动特效，代码简单易懂，需要的朋友参考下
2017-01-01
基于jQuery实现弹幕APP
这篇文章主要为大家详细介绍了基于jQuery实现弹幕APP的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
使用jQuery在对象中缓存选择器的简单方法
这篇文章主要介绍了使用jQuery在对象中缓存选择器的简单方法,jQuery是最知名的JavaScript库,需要的朋友可以参考下
2015-06-06
jQuery实现鼠标选文字发新浪微博的方法
这篇文章主要介绍了jQuery实现鼠标选文字发新浪微博的方法,涉及jQuery鼠标事件的响应及新浪接口的调用技巧,非常简单实用的功能,需要的朋友可以参考下
2016-04-04
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们，下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
2015-08-08
EasyUI加载完Html内容样式渲染完成后显示
这篇文章主要介绍了EasyUI加载完Html内容样式渲染完成后显示的相关资料,需要的朋友可以参考下
2016-07-07
jQuery实现常见的隐藏与展示列表效果示例
这篇文章主要介绍了jQuery实现常见的隐藏与展示列表效果,结合完整实例形式分析了jQuery事件响应及针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2018-06-06
jquery获取一组checkbox的值(实例代码)
使用jquery获取一组checkbox的值实例代码。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
最新的10款jQuery内容滑块插件分享
本篇文章介绍10款新鲜、有用的jQuery内容导航插件，肯定是免费的了，希望对你有帮助。
2011-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具