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);
});
});
效果图：



转载请注明来源，谢谢！