7句js代码实现网页 折叠菜单

最近经常用到javascript，做了很多网页效果，其中有个折叠菜单。

网上的代码 一大堆，麻烦，而且看不懂，我就搞不懂了，写那么多代码干嘛~~~~ 所以自己写了个。

主要用到了 jquery和ul和li

定义菜单的格式是这样的：

<ul class="list">
   				
   					<li>
   						<a class="list-title">我的信息</a><b class="icon"></b>
   						<ul>
   							<li><a href="#">个人资料</a></li>
   							<li><a href="#">收货地址</a></li>
   						</ul>	
   					</li>
   					
   					<li>
   						<a class="list-title">购物</a><b class="icon"></b>
   						<ul>
   							<li><a href="#">我的订单</a></li>
   							<li><a href="#">交易记录</a></li>
   							<li><a href="#">我的收藏</a></li>
   							<li><a href="#">购物车</a></li>
   							<li><a href="#">查看物流</a></li>
   						</ul>	
   					</li>
   					
   					
   					<li>
   						<a class="list-title">售后服务</a><b class="icon"></b>
   						<ul>
   							<li><a href="#">订单查询</a></li>
   							<li><a href="#">退货申请</a></li>
   							<li><a href="#">投诉维权</a></li>
   						</ul>	
   					</li>
   					
   					<li>
   						<a class="list-title">购物帮助</a><b class="icon"></b>
   						<ul>
   							<li><a href="#">如何购物</a></li>
   							<li><a href="#">购买流程</a></li>
   							<li><a href="#">帮助</a></li>
   						</ul>	
   					</li>
   					
   				
   				</ul>

javascript代码：

$(document).ready(function(){
	$(".list-title").click(function(){   //为左边的导航条注册事件 折叠效果
		var parent=$(this).parent();  //寻找当前的父容器
		var re=parent.css("height")!="35px"?"35px":"auto";
		parent.css("height",re);
	});
});

效果图：

转载请注明来源，谢谢！