《基于jquery实现无限级树形菜单_.docx》由会员分享,可在线阅读,更多相关《基于jquery实现无限级树形菜单_.docx(6页珍藏版)》请在三一文库上搜索。
1、基于jquery实现无限级树形菜单_ 本文实例为大家分享了基于jquery实现无限级树形菜单效果,具有肯定的参考价值,具体内容如下 实现代码: html head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title无限级树形菜单/title /head script src=jquery.min.js/script style ul.awidth:100%;cursor:pointer;padding:0 0px;color:white; ul.a lilist-style-type:none;curso
2、r:pointer;background:#fff;padding:5px 10px;color:black;width:90%;display:none .treelistwidth:222px; ul.a divheight:34px;width:100%;background:url(jia.jpg) no-repeat;padding-left:27px;padding-top:6px;color:#333333;font-weight:bold;font-size:15px .showsdisplay:block /style body div class=treelist ul c
3、lass=a divccccc/div lixxxx/li li ul class=a divccccc/div lixxxx/li lixxxx/li li ul class=a divccccc/div li ul class=a divccccc/div lixxxx/li lixxxx/li lixxxx/li lixxxx/li /ul /li lixxxx/li lixxxx/li lixxxx/li /ul /li lixxxx/li /ul /li lixxxx/li lixxxx/li /ul ul class=a divccccc/div lixxxx/li lixxxx/
4、li lixxxx/li lixxxx/li /ul ul class=a divccccc/div lixxxx/li lixxxx/li lixxxx/li lixxxx/li /ul /div script /* $(.a div).each(function(i) var w=$(this).parents(li).width(); $(this).css(width,w-100+px); ) */ $(.a).click(function() $(this).find(li).click(function(event) return false ) if($(this).hasCla
5、ss(shows) $(this).removeClass(shows); $(this).find(li).find(ul).removeClass(shows); $(this).find(li).hide(); $(this).find(div).css(background,url(jia.jpg) no-repeat); else $(this).addClass(shows); $(this).find(li).show(); $(this).find(li).find(ul).find(li).hide(); $(this).show(); $(this).find(div).eq(0).css(background,url(jian.jpg) no-repeat); ) /script /body /html 盼望本文所述对大家学习javascript程序设计有所关心。 .