JQ 展开收起

刺骨的言语ヽ痛彻心扉 2021-12-10 08:53 337阅读 0赞

<!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)");
                }            
            });
        })

转载于:https://www.cnblogs.com/fkcqwq/p/11113851.html