jquery做个折叠面板 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>折叠面板</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        body{
            background:#F8F8FF;
        }
        #flodbox{
            width:500px;
            margin:0 auto;
        }
        .flodTitle{
            padding:10px;
            border-bottom:1px solid #ddd;
            background:    #696969;
            color:#ffffff;
            font-weight: bold;
            font-size:18px;
            cursor: pointer;
            position: relative;
        }
        .flodTitle .num{
            margin-right:10px;
            background:red;
        }
        .flodTitle .titleBox{
            display: inline-block;
            width:80%;
        }
        .flodTitle .titleRightBox{
            display: inline-block;
            width:18%;
            height:100%;
            position: absolute;
            top:0;
        }
        .flodTitle .titleRightwraper{
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            width:100%;
            text-align: center;
        }
        .flodContentBox{
            padding:0 10px;
            background:#DCDCDC;
            height:100%;
        }
        .flodContentBox>li{
            padding:4px 0;
            border-bottom:1px solid #F8F8FF;
        }
        .flodContentBox>li:last-child{
            border-bottom:0;
        }
        .rotateLeft{
            transform:rotate(-90deg);
            -ms-transform:rotate(-90deg);     /* IE 9 */
            -moz-transform:rotate(-90deg);     /* Firefox */
            -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
            -o-transform:rotate(-90deg);     /* Opera */
        }
        .flodItem .flodTitle .titleRightwraper>i{
            transition: all 0.5s;
            -webkit-transition: all 0.5s; /* Safari */
        }
    </style>
</head>
<body>
    <ul id="flodbox">
        <li class="flodItem">
            <div class="flodTitle">
                <span class="titleBox">分类一</span>
                <span class="titleRightBox">
                    <span class="titleRightwraper">
                        <i class="glyphicon glyphicon-chevron-down pull-right"></i>
                        <span class="num badge pull-right">53</span>
                    </span>
                </span>
            </div>
            <ul class="flodContentBox">
                <li>11</li>
                <li>12</li>
                <li>13</li>
            </ul>
        </li>
        <li class="flodItem">
            <div class="flodTitle">
                <span class="titleBox">分类一</span>
                <span class="titleRightBox">
                    <span class="titleRightwraper">
                        <i class="glyphicon glyphicon-chevron-down pull-right"></i>
                        <span class="num badge pull-right">53</span>
                    </span>
                </span>
            </div>
            <ul class="flodContentBox">
                <li>11</li>
                <li>12</li>
                <li>13</li>
            </ul>
        </li>
        <li class="flodItem">
            <div class="flodTitle">
                <span class="titleBox">分类一</span>
                <span class="titleRightBox">
                    <span class="titleRightwraper">
                        <i class="glyphicon glyphicon-chevron-down pull-right"></i>
                        <span class="num badge pull-right">53</span>
                    </span>
                </span>
            </div>
            <ul class="flodContentBox">
                <li>11</li>
                <li>12</li>
                <li>13</li>
            </ul>
        </li>
    </ul>

    <script>
        $(function(){
            $("#flodbox>.flodItem>.flodTitle").click(function(){
                if($(this).find("i").hasClass("rotateLeft")){
                    $(this).find("i").removeClass("rotateLeft");
                    $(this).parent().find(".flodContentBox").slideDown();;
                }else{
                    $(this).find("i").addClass("rotateLeft");
                    $(this).parent().find(".flodContentBox").slideUp();
                }
            })
        })
    </script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2019-11-04 23:40  古墩古墩  Views(176)  Comments(0)    收藏  举报