jQuery 点击查看 收起 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击查看 收起</title>
    <script src="js/jquery-1.7.1.min.js"></script>
</head>
<style>
    .abc{width: 150px;height: 150px;background: red;}
    .fff{font-size: 18px;color: blue;}
    .big-box{background: #888;}
    .pink{
        width: 150px;
        height: 100px;
        background: pink;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        transform: rotate(80deg);
        text-align: center;
        line-height: 100px;
    }

    .fff{
        background: #fff;
        border: 1px solid #000;
    }
    .head{line-height: 30px;}
    .arrow{width: 20px;height: 20px;background: red;display: block;float: right;}

.show_hide_btn{line-height: .64rem;font-size: .28rem;color: #4c4c4c;text-align: center;}
.show_hide_btn i{display: inline-block;width: 50px;height:50px;vertical-align: top;margin-top: .18rem;margin-left: .1rem;
 background: url(img/fold_t.png) no-repeat center #fe3837;background-size: 30px auto;border-radius: 50%;    box-shadow: 0 5px 15px 0 rgba(0,0,0,.14);}
.show_hide_btn i.flod_t{background: url(img/fold_t.png) no-repeat center #fe3837; background-size: 30px auto;transform:rotate(180deg);
-ms-transform:rotate(180deg);     /* IE 9 */
-moz-transform:rotate(180deg);     /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg); }
</style>
<script>
    $(document).ready(function() {
 var le = $('div.coup_list').length;
if(le >1){
$('.show_hide_btn').css('display','block');
  $('.coup_list:gt(0)').css('display','none');
}  
$('.show_hide_btn').toggle(function(){
    $('.coup_list:gt(0)').show();
    $('.show_hide_btn i').addClass('flod_t');
    $('.show_hide_btn span').html('收起')
}
    ,function(){
        $('.coup_list:gt(0)').hide();
        $('.show_hide_btn i').removeClass('flod_t');
        $('.show_hide_btn span').html('点击查看');
})
    });

</script>
<body>
<div class="coup">
    <div class="coup_list">111</div>
    <div class="coup_list">44445</div>
    <div class="coup_list">5675</div>
    <div class="coup_list">ertyr</div>
    <div class="coup_list">ertyer</div>
    <div class="coup_list">ertye</div>
    <div class="coup_list">etryefsdfr</div>
    <div class="show_hide_btn" style="display:none" ><span>点击查看全部券码 </span><i class=""></i></div>
</div>

</body>
</html>

 

posted @ 2017-10-26 17:30  拈花醉  阅读(625)  评论(0)  编辑  收藏  举报