当前位置：Gxlcms > JavaScript > jquerytree可编辑节点实现代码(jquery一句话节点菜单)_jquery

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

时间：2021-07-01 10:21:17 帮助过：8人阅读

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

<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需刷新才能执行]

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

人气教程排行