1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script> 6 <style type="text/css"> 7 *{margin:0px;padding:0px;} 8 body{font-size:12px;} 9 10 .box{margin:10px;padding:10px;} 11 .box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;} 12 .box p{line-height:20px;} 13 strong{color:Red;margin-right:20px;} 14 15 .treebox{margin:10px;padding:10px;width:380px;} 16 .treebox ul{list-style:none;margin-left:15px;} 17 .treebox>ul{list-style:none;margin-left:0px;} 18 .treebox ul li{margin:12px 20px;} 19 .treebox ul li label{list-style:none;cursor:pointer;line-height:16px;display:block;padding-left:20px;} 20 .treebox ul li label.collapse{background-image:url(images/treeplus.gif);background-repeat:no-repeat;} 21 .treebox ul li label.expand{background-image:url(images/treeminus.gif);background-repeat:no-repeat;} 22 #panels dt{height:30px;line-height:30px;padding-left:10px;border:1px solid #aaccff;font-weight:bold;font-size:14px;background-color:#bb44aa;margin-top:-1px;cursor:pointer;} 23 #panels dd{height:230px;padding:10px;line-height:20px;border:1px solid #aaccff;margin-top:-1px;} 24 25 </style> 26 <script type="text/javascript"> 27 $(function(){ 28 29 30 $(".expand").click(function(){ 31 //$(this).hide(); 32 // $(this).children("li").hide(); 33 //通过当前的元素，找到他的所有子孙 34 $(this).siblings().toggle(); 35 36 }); 37 38 39 40 }); 41 42 </script> 43 44 </head> 45 <body> 46 <div class="box"> 47 <h3><strong>选作</strong>本试题重点考察jquery构造树形控件，具体要求如下:</h3> 48 <p> 49 1.点击每个节点时，将其子节点显示或隐藏。<br /> 50 </p> 51 </div> 52 53 54 <div class="treebox"> 55 <ul> 56 <li> 57 <label class="expand">河北省</label> 58 <ul> 59 <li><label>石家庄市</label></li> 60 <li> 61 <label class="expand">保定市</label> 62 <ul> 63 <li><label>望都县</label></li> 64 <li><label>顺平县</label></li> 65 <li><label>唐县</label></li> 66 </ul> 67 </li> 68 </ul> 69 </li> 70 <li> 71 <label class="expand">重庆市</label> 72 <ul> 73 <li> 74 <label>沙坪坝区</label> 75 </li> 76 <li> 77 <label>北碚区</label> 78 </li> 79 <li> 80 <label>江北区</label> 81 </li> 82 <li> 83 <label>南岸区</label> 84 </li> 85 </ul> 86 </li> 87 <li> 88 <label>北京市</label> 89 </li> 90 </ul> 91 </div> 92 93 94 </body> 95 </html>