JQuery实现手风琴特效

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实现手风琴特效

猜你喜欢