jQuery:树形导航

[color=red]哎，要好好学习哦！！[/color]
要点：由两个ul组成，理清楚每一个ul所代表的意义，
先把具体要实现的样式排出来，再相应的调用js
js中可以简单的理解为，当点击其中的某个span时，完成两个工作，其一给span的parent()【即span上面的li】添加“collapsed”类；其二，hide（）与span成为silbings同胞级元素ul。

css样式如下：

<style>
*{ margin:0px; padding:0px;}
ul{ list-style:none;}
li{ line-height:22px;}
.tree{ margin:40px;}
/*第一个ul*/
.treelist li.expanded{ background:url(images/11.gif) no-repeat 0 3px; padding-left:15px; cursor:pointer;}
.treelist li.collapsed{ background:url(images/1.gif) no-repeat 0 3px; padding-left:15px; cursor:pointer;}
/*第2个ul*/
.treelist li.expanded ul li{ background:url(images/2.gif) no-repeat 0 0; padding-left:15px;}

</style>

js代码如下：

<script > 
$(function(){
   $(".treelist > li > span").click(function(){
      var $ul = $(this).siblings("ul");
	  if($ul.is(":visible")){
	      $(this).parent().attr("class","collapsed");
		  $ul.hide();
	  }else{
	      $(this).parent().attr("class","expanded");
		  $ul.show();
	  }
	  return false;
   });
});

</script>

Html代码如下：

<div class="tree">
	<h3>产品分类</h3>
	<ul class="treelist">
		<li class="expanded">
			<span>衬衫</span>
			<ul>
			   <li><span>短袖衬衫</span></li>
			   <li><span>长袖衬衫</span></li>	
		    </ul>
		</li>
		<li class="expanded">
			<span>卫衣</span>
			<ul>
			   <li><span>开襟卫衣</span></li>
				<li><span>套头卫衣</span></li>	
			</ul>
		 </li>
		<li class="expanded">
			<span>裤子</span>
			<ul>
			   <li><span>休闲裤</span></li>
			   <li><span>免烫卡其裤</span></li>	
			   <li><span>牛仔裤</span></li>
			   <li><span>短裤</span></li>
		    </ul>
		</li>
	  </ul>
</div>