JQ 展开收起

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td
{ margin:0; padding:0}

span{
    color:#FF2B13;
}
a{
    text-decoration: none;
    color:#515050;
}
a:hover{
    text-decoration: underline;
    color:red;
}


.box_all{  
    overflow: hidden;        
    width: 350px;    
    font-family: "寰蒋闆呴粦";
    font-size: 14px;
    border:1px solid #EEEEEE;     
    border-top:2px solid #F57A04;
    padding:0 0 10px 0;
    margin:40px auto 0 auto; 
}
.box {    
   padding-left:45px;
   padding-top:5px;    
}
.box li{     
    line-height:30px;
    margin-right:30px;
    width:120px;
    text-align:left;     
    float:left;   
    list-style-type:none;       
}

.boxdown{           
    cursor:pointer;
    border:1px solid #EEEEEE;
    width:60px;
    height:14px;   
    background: #FFFFFF url(http://www.17sucai.com/preview/27774/2014-08-08/jQuery%E5%88%B6%E4%BD%9C%E8%8F%9C%E5%8D%95%E4%BC%B8%E5%B1%95%E6%94%B6%E7%BC%A9%E7%89%B9%E6%95%88%E5%8F%AF%E4%BB%A5%E9%9A%90%E8%97%8F%E5%A4%9A%E4%BD%99%E5%86%85%E5%AE%B9/images/down.png) no-repeat 20px;
    margin-left:150px;  
    margin-top:-2px;     
    border-top: none; 
    margin:0 auto; 
      
}
.up{
    cursor:pointer;
    border:1px solid #EEEEEE;
    width:60px;
    height:14px;   
    background: #FFFFFF url(http://www.17sucai.com/preview/27774/2014-08-08/jQuery%E5%88%B6%E4%BD%9C%E8%8F%9C%E5%8D%95%E4%BC%B8%E5%B1%95%E6%94%B6%E7%BC%A9%E7%89%B9%E6%95%88%E5%8F%AF%E4%BB%A5%E9%9A%90%E8%97%8F%E5%A4%9A%E4%BD%99%E5%86%85%E5%AE%B9/images/up.png) no-repeat 20px;
    margin-left:150px;  
    margin-top:-2px;     
    border-top: none; 
    margin:0 auto; 
}
    </style>
    <body>
        <div class="box_all">
            <div class="box">
                <ul>
                    <li> <a href="#">网页设计</a><span>(2810)</span> </li>
                    <li> <a href="#">网页软件</a><span>(820)</span> </li>
                    <li> <a href="#">图像设计</a><span>(1840)</span> </li>
                    <li> <a href="#">网站开发</a><span>(17810)</span> </li>
                    <li> <a href="#">网站运营</a><span>(7890)</span> </li>
                    <li> <a href="#">建站指南</a><span>(4850)</span> </li>
                    <li> <a href="#">数据库</a><span>(15020)</span> </li>
                    <li> <a href="#">服务器</a><span>(12120)</span> </li>
                    <li> <a href="#">视频教程</a><span>(12120)</span> </li>
                    <li> <a href="#">书籍下载</a><span>(12120)</span> </li>
                    <li> <a href="#">更多的资源</a><span>(91123)</span> </li>
                </ul>
            </div>
        </div>
        <div class="boxdown"></div>

    </body>
</html>
<script type="text/javascript">
$(document).ready(function(){
    var a =$(".box ul li:gt(3):not(:last)");
        a.hide();
    $(".boxdown").click(function(){
        if(a.is(':visible')){
             a.slideUp('fast');
             $(this).removeClass('up');
        }else{
            a.slideDown('fast').show();    
            $(this).addClass('up');
        }            
    });
});
</script>

当一个页面需要多个这种功能，就需要用到遍历：

$(".contentBox .swiper2 .scheduleBox .day").each(function(){
        var a =$(this).find(".dayBox dl dd:gt(1)");
        a.hide();
        $(this).find(".showHide").click(function(){
            if(a.is(':visible')){
                 a.slideUp('fast');
                 $(this).removeClass('up');
                 $(this).find("span").text('展开详细');
                 $(this).find("i").css("transform","rotate(-90deg)");
            }else{
                a.slideDown('fast').show();    
                $(this).addClass('up');
                $(this).find("span").text('收起');
                $(this).find("i").css("transform","rotate(-270deg)");
            }            
        });
    })

猜你喜欢