HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴特效</title> <link rel="stylesheet" href="../css/index.css"> </head> <body> <div class="container"> <!-- 我的酒店--> <div class="title">我的酒店<img src="../img/down.png" class="icon rt"/></div> <ul class="content fade"> <li><a href="">酒店订单</a></li> <li><a href="">酒店点评</a></li> <li><a href="">酒店问答</a></li> <li><a href="">酒店收藏</a></li> </ul> <!-- 我的景点--> <div class="title">我的景点<img src="../img/down.png" class="rt"/></div> <ul class="content fade"> <li><a href="">景点订单</a></li> <li><a href="">景点点评</a></li> <li><a href="">景点问答</a></li> <li><a href="">景点收藏</a></li> </ul> <!-- 旅游路线--> <div class="title">旅游路线<img src="../img/down.png" class="rt"/></div> <ul class="content fade"> <li><a href="">旅游路线订单</a></li> <li><a href="">旅游路线点评</a></li> <li><a href="">旅游路线问答</a></li> <li><a href="">旅游路线收藏</a></li> </ul> <!-- 我的购物车--> <div class="title">我的购物车<img src="../img/down.png" class="rt"/></div> <ul class="content fade"> <li><a href="">购物车订单</a></li> </ul> <!-- 组合套餐--> <div class="title">组合套餐<img src="../img/down.png" class="rt"/></div> <ul class="content fade"> <li><a href="">组合套餐订单</a></li> <li><a href="">组合套餐点评</a></li> <li><a href="">组合套餐问答</a></li> <li><a href="">组合套餐收藏</a></li> </ul> <!-- 旅游商品--> <div class="title">旅游商品<img src="../img/down.png" class="rt"/></div> <ul class="content fade"> <li><a href="">商品订单</a></li> <li><a href="">商品收藏</a></li> </ul> <!-- 旅游攻略--> <div class="title">旅游攻略<img src="../img/down.png" class="rt"/></div> <ul class="content fade"> <li><a href="">我的攻略</a></li> <li><a href="">攻略收藏</a></li> </ul> <!-- 账户信息--> <div class="title">账户信息<img src="../img/down.png" class="rt"/></div> <ul class="content fade in"> <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> <li><a href="">退出</a></li> </ul> </div> <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../js/index.js"></script> </body> </html>CSS部分
/*通用 CSS ：大部分元素具备的样式*/ body{ font:12px "microsoft yahei",Arial,Helvetica,sans-serif; color:#000304; margin:0; background-color: #ffffff; overflow-x: hidden; } p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{ margin:0; padding:0; list-style:none; } img{ vertical-align:middle; } a{ color:#000304; text-decoration:none; } a:hover{ text-decoration:none; } a:focus{ text-decoration:none; } .lf{float:left;} .rt{float:right;} .clear:after{ content: ' '; display: table; clear: both; } .clear{ clear: both; } /*============*/ .container{ width: 160px; margin: 20px auto; border: 1px solid #d2d2d2; border-bottom: 0; } .title { width: 140px; height: 41px; line-height: 41px; font-size: 15px; color: #333; background-color: #f7f7f7; border-bottom: 1px solid #d2d2d2; padding-left: 20px; cursor: pointer; } .title>img { width: 11px; height: 5px; margin-top: 18px; margin-right: 10px; } .content { width: 158px; background-color: #fff; border-bottom: 1px solid #d2d2d2; } .fade { height: 0; opacity: 0; overflow: hidden; transition: all .5s linear; } .content>li { width: 160px; height: 30px; line-height: 30px; } .content>li>a { font-size: 15px; margin-left: 20px; } .in{ opacity: 1; height: 180px; }JS部分
$(".container").on("click",".title",function(e){ //给当前title的下一个兄弟div切换in class，再查找兄弟div之外的其它兄弟div中class为content的兄弟，去掉in $(e.target).next().toggleClass("in").siblings(".content").removeClass("in"); //class in的高度 var inHeight=$(".in>li").length*30, ul=$(".container>ul"), $img=$(e.target).children(); $(".in").css("height",inHeight);//改变in的高度 if(!ul.hasClass("in")){ ul.css("height","0"); } //点击切换图片 if($img.attr("src")==="../img/down.png"){ $img.attr("src","../img/top.png"); }else{ $img.attr("src","../img/down.png"); } }); $(".title").click(function(e){ if(!$(e.target).next().hasClass("in")){ $(".container>ul").css("height","0"); } });转载请标明出处:JQuery实现手风琴特效
文章来源: JQuery实现手风琴特效