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);
});
});
效果图:
转载请注明来源,谢谢!