<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0} ul{ list-style:none} body{ font:12px/1.5 arial} .accordion{ width:300px; margin:100px; border-bottom:1px solid #c4c4c4} .accordion h2{border:1px solid #c4c4c4; border-bottom:none; background:#e9e7e7 url(arrow.gif) no-repeat 100% -51px; cursor:pointer} .accordion h2:hover{ background-color:#e3e2e2} .accordion h2.active{ background-position:100% 5px} .accordion ul{ display:none; border-right:1px solid #c4c4c4; border-left:1px solid #c4c4c4; background:#f7f7f7} </style> </head> <body> <div class="accordion"> <h2>订单中心</h2> <ul> <li><a href="#">我的订单</a></li> <li><a href="#">我的团购</a></li> <li><a href="#">在线支付</a></li> </ul> <h2>客户服务</h2> <ul> <li><a href="#">退款申请</a></li> <li><a href="#">我的投诉</a></li> <li><a href="#">价格举报</a></li> </ul> <h2>账户中心</h2> <ul> <li><a href="#">账户信息</a></li> <li><a href="#">账户安全</a></li> <li><a href="#">账户余额</a></li> </ul> </div> <script src="jquery-1.5.2.min.js"></script> <script> $(function(){ $(".accordion h2").eq(2).addClass("active"); $(".accordion ul").eq(2).show(); $(".accordion h2").click(function(){ $(this).next("ul").slideToggle("slow").siblings("ul:visible").slideUp("slow"); $(this).toggleClass("active").siblings("h2").removeClass("active"); }); }); </script> </body> </html>
arrow.gif