1、源码 以下是源码，很方便的能引入的自己项目中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
1、源码
以下是源码，很方便的能引入的自己项目中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jqueryTest</title><script type="text/javascript" src="../js/jquery-1.3.2.js" ></script><style type="text/css"> body,div{ margin:0;padding:0;} #menu {width:200px;} .has_children{ background:url(../image/bg_title.gif) no-repeat; padding:8px 0 8px 25px; font-weight:bold; cursor:pointer; margin:0; display:block; } .highlight{ background:url(../image/bg_title_visited.gif) no-repeat; padding:8px 0 8px 25px; color:#f59000; font-weight:bold; cursor:auto; margin:0; display:block; } .highlight a{ margin-top:10px; } a:hover { color: #000000; background-color:#dfdfdf; text-decoration:underline; font-weight:normal; margin-top:10px; } .has_children a{ display:none; width:auto; }</style><script type="text/javascript"> $(function(){ $(".has_children").click( function(){ //元素 $(this).siblings().filter(".highlight").children("a").slideToggle("normal"); $(this).end().siblings().filter(".highlight").children("a").slideToggle("normal"); if($(this).children("a").is(":hidden"))//隐藏 { $(this).children("a").slideToggle("normal");//slideToggle 隐藏或者显示 $(this).removeClass("has_children"); $(this).addClass("highlight"); }else{ $(this).children("a").slideToggle("normal");//slideToggle 隐藏或者显示 $(this).removeClass("highlight"); $(this).addClass("has_children"); } $(this).siblings().filter(".highlight").removeClass("highlight").addClass("has_children"); }); });</script></head><body> <div id="menu"> <div class="has_children"> <span>研发中心</span> <a href="#">研发中心一部</a> <a href="#">研发中心二部</a> <a href="#">研发中心三部</a> <a href="#">研发中心四部</a> <a href="#">研发中心五部</a> </div> <div class="has_children"> <span>销售部</span> <a href="#">华北区</a> <a href="#">华南区</a> <a href="#">东北区</a> <a href="#">江南区</a> </div> <div class="has_children"> <span>行政部</span> <a href="#">行政部所有人员</a> <a href="#">行政部所有人1员</a> <a href="#">行政部所有人2员</a> </div> <div class="has_children"> <span>行政1部</span> <a href="#">行政部所有人1员</a> <a href="#">行政部所有人11员</a> <a href="#">行政部所有人12员</a> </div> </div></body></html>2、资源图片
所需要的两张图片
3、执行效果
