<span id="bzfm9"></span>

_{<ul id="bzfm9"></ul>}

點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

jquerytree可編輯節(jié)點(diǎn)實(shí)現(xiàn)代碼(jquery一句話節(jié)點(diǎn)菜單)_jquery

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:45:18

jquerytree可編輯節(jié)點(diǎn)實(shí)現(xiàn)代碼(jquery一句話節(jié)點(diǎn)菜單)_jquery

jquerytree可編輯節(jié)點(diǎn)實(shí)現(xiàn)代碼(jquery一句話節(jié)點(diǎn)菜單)_jquery:下面的代碼。大家可以研究下，對(duì)于jquery的學(xué)習(xí)還是非常有好處的。鋒利的jquery中的一句話代碼，實(shí)現(xiàn)的菜單運(yùn)行后，需要刷新下(因?yàn)槭钦{(diào)用的外地jquery) 1-5-1 #menu { width:300px; } .has_children{ background : #555;

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀jquerytree可編輯節(jié)點(diǎn)實(shí)現(xiàn)代碼(jquery一句話節(jié)點(diǎn)菜單)_jquery:下面的代碼。大家可以研究下，對(duì)于jquery的學(xué)習(xí)還是非常有好處的。鋒利的jquery中的一句話代碼，實(shí)現(xiàn)的菜單運(yùn)行后，需要刷新下(因?yàn)槭钦{(diào)用的外地jquery) 1-5-1 #menu { width:300px; } .has_children{ background : #555;

下面的代碼。大家可以研究下，對(duì)于jquery的學(xué)習(xí)還是非常有好處的。
鋒利的jquery中的一句話代碼，實(shí)現(xiàn)的菜單

運(yùn)行后，需要刷新下(因?yàn)槭钦{(diào)用的外地jquery)
<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> 第1章-認(rèn)識(shí)jQuery 1.1-JavaScript和JavaScript庫(kù) 1.2-加入jQuery 1.3-編寫(xiě)簡(jiǎn)單jQuery代碼 1.4-jQuery對(duì)象和DOM對(duì)象 1.5-解決jQuery和其它庫(kù)的沖突 1.6-jQuery開(kāi)發(fā)工具和插件 1.7-小結(jié) 第2章-jQuery選擇器 2.1-jQuery選擇器是什么 2.2-jQuery選擇器的優(yōu)勢(shì) 2.3-jQuery選擇器 2.4-應(yīng)用jQuery改寫(xiě)示例 2.5-選擇器中的一些注意事項(xiàng) 2.6-案例研究——類(lèi)似淘寶網(wǎng)品牌列表的效果 2.7-還有其它選擇器么？ 2.8-小結(jié) 第3章-jQuery中的DOM操作 3.1-DOM操作的分類(lèi) 3.2-jQuery中的DOM操作 3.3-案例研究——某網(wǎng)站超鏈接和圖片提示效果 3.4-小結(jié) </body> </html>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

運(yùn)行后，需要刷新下(因?yàn)槭钦{(diào)用的外地jquery)
<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需刷新才能執(zhí)行]

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jquerytree可編輯節(jié)點(diǎn)實(shí)現(xiàn)代碼(jquery一句話節(jié)點(diǎn)菜單)_jquery

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：一句話 jQuery 菜單實(shí)現(xiàn)代碼

熱門(mén)焦點(diǎn)

jquerytree可編輯節(jié)點(diǎn)實(shí)現(xiàn)代碼(jquery一句話節(jié)點(diǎn)菜單)_jquery

jquerytree可編輯節(jié)點(diǎn)實(shí)現(xiàn)代碼(jquery一句話節(jié)點(diǎn)菜單)_jquery

jquerytree可編輯節(jié)點(diǎn)實(shí)現(xiàn)代碼(jquery一句話節(jié)點(diǎn)菜單)_jquery

最新推薦

猜你喜歡

熱門(mén)推薦