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);});});

效果图：

转载请注明来源，谢谢！