目标伪类选择器实现手风琴效果

来源：互联网发布：java软件工程师薪资编辑：程序博客网时间：2024/05/12 01:16
Paste_Image.png
闲话不多说，直接上代码：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .accordionMenu{            background: #fff;            color: #424242;            font: 12px Arial,Verdana,sans-serif;            margin: 0 auto;            padding: 10px;            width: 500px;        }        .accordionMenu h2{            margin: 5px 0;            padding: 0;            position: relative;        }        .accordionMenu h2:before{            border: 5px solid transparent;            border-top-color: #fff;            content: '';            height: 0;            position: absolute;            right: 10px;            top: 15px;            width: 0;        }        .accordionMenu h2 a{            background: #8f8f8f;            border-radius: 5px;            color: #424242;            display: block;            font-size: 13px;            font-weight: normal;            margin: 0;            padding: 10px;            text-shadow:  2px 2px 2px #aeaeae;            text-decoration: none;        }        .accordionMenu :target h2 a,        .accordionMenu h2 a:focus,        .accordionMenu h2 a:hover,        .accordionMenu h2 a:active{            background: #2288dd;            color: #ffffff;        }        .accordionMenu p{            margin:  0;            height: 0;            overflow: hidden;            padding: 0 10px;            transition:  height 0.5s ease-in;        }        .accordionMenu :target p{            height: 100px;            overflow: auto;        }        .accordionMenu :target h2:before{            border-color:  transparent transparent transparent #fff;        }    </style></head><body>    <div class="accordionMenu">        <div class="menuSection" id="brand">            <h2><a href="#brand">Brand</a></h2>            <p>Lorem    ipsum dolor...</p>        </div>    </div>        <div class="accordionMenu">            <div class="menuSection" id="promition">                <h2><a href="#promition">promition</a></h2>                <p>Lorem    ipsum dolor sit amet...</p>            </div>        </div>            <div class="accordionMenu">                <div class="menuSection" id="event">                    <h2><a href="#event">event</a></h2>                    <p>Lorem    ipsum dolor sit amet...</p>                </div>    </div></body></html>
0 0