14jquery实现的折叠选项卡

2019-03-11  本文已影响0人  An的杂货铺
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .tab{
            width: 200px;
            border: 1px solid #000;
            background: skyblue;
            margin-bottom: 20px;
            overflow: hidden;
        }
        .tab .box h2{
            padding-left: 10px;
            font-size: 20px;
            font-weight: bold;
            line-height: 30px;
            margin-bottom: 5px;
            cursor: pointer;
        }
        .tab .box h2 span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            margin-right: 10px;
            line-height: 20px;
            text-align: center;
        }
        .tab .box .detail{
            padding-left: 30px;
            font-size: 14px;
            line-height: 28px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="box">
            <h2><span>+</span>男装</h2>
            <div class="detail">
                <p>短裤</p>
                <p>牛仔裤</p>
                <p>T恤衫</p>
            </div>
        </div>
        <div class="box">
            <h2><span>+</span>女装</h2>
            <div class="detail">
                <p>连衣裙</p>
                <p>破洞牛仔裤</p>
                <p>防晒衣</p>
            </div>
        </div>
        <div class="box">
            <h2><span>+</span>童装</h2>
            <div class="detail">
                <p>短裤</p>
                <p>半身裙</p>
                <p>T恤衫</p>
            </div>
        </div>
    </div>
    <div class="tab">
        <div class="box">
            <h2><span>+</span>男装</h2>
            <div class="detail">
                <p>短裤</p>
                <p>牛仔裤</p>
                <p>T恤衫</p>
            </div>
        </div>
        <div class="box">
            <h2><span>+</span>女装</h2>
            <div class="detail">
                <p>连衣裙</p>
                <p>破洞牛仔裤</p>
                <p>防晒衣</p>
            </div>
        </div>
        <div class="box">
            <h2><span>+</span>童装</h2>
            <div class="detail">
                <p>短裤</p>
                <p>半身裙</p>
                <p>T恤衫</p>
            </div>
        </div>
    </div>
    <div class="tab">
        <div class="box">
            <h2><span>+</span>男装</h2>
            <div class="detail">
                <p>短裤</p>
                <p>牛仔裤</p>
                <p>T恤衫</p>
            </div>
        </div>
        <div class="box">
            <h2><span>+</span>女装</h2>
            <div class="detail">
                <p>连衣裙</p>
                <p>破洞牛仔裤</p>
                <p>防晒衣</p>
            </div>
        </div>
        <div class="box">
            <h2><span>+</span>童装</h2>
            <div class="detail">
                <p>短裤</p>
                <p>半身裙</p>
                <p>T恤衫</p>
            </div>
        </div>
    </div>
    <script src="./jquery-1.12.1.min.js"></script>
    <script>
        $('.box h2').click(function(){
            var ospan = $(this).children('span');
            ospan.html(ospan.html() === '+'?'-':'+');
            $(this).parent().siblings().children().find('span').html('+');
            $(this).siblings().slideToggle(600).parent().siblings().children('div').slideUp(600)
            //$(this).siblings().toggle(600).parent().siblings().children('div').hide(600) 也可以
        })
    </script>
</body>
</html>

如下图


image.png
上一篇 下一篇

猜你喜欢

热点阅读