css3写下拉列表展开

最新推荐文章于 2024-07-06 14:43:30 发布

原创最新推荐文章于 2024-07-06 14:43:30 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

pc-web前端开发专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何利用CSS3的属性和过渡效果，实现下拉列表的动态展开和收起，增强了用户体验。通过设置适当的选择器和动画时间，创建了平滑的展开动画。

这里写图片描述

<div class="wrapper">
            <div class="harf">
                <aside class="tab">
                    <input id="tab-one" type="checkbox" name="tabs" />
                    <label for="tab-one">Label One</label>
                    <div class="tab-content">
                        <p>少无适俗韵，性本爱丘山。林下漏月光，疏疏如残雪.长亭外古道边，芳草碧连天。少无适俗韵，性本爱丘山。林下漏月光，疏疏如残雪.长亭外古道边，芳草碧连天</p>
                    </div>
                </aside>
                <aside class="tab">
                    <input id="tab-two" type="checkbox"  name="tabs"/>
                    <label for="tab-two">Label two</label>
                    <div class="tab-content">
                        <p>少无适俗韵，性本爱丘山。林下漏月光，疏疏如残雪.长亭外古道边，芳草碧连天。少无适俗韵，性本爱丘山。林下漏月光，疏疏如残雪.长亭外古道边，芳草碧连天</p>
                    </div>
                </aside>
                <aside class="tab">
                    <input id="tab-thress" type="checkbox" name="tabs" />
                    <label for="tab-thress">Label Three</label>
                    <div class="tab-content">
                        <p>少无适俗韵，性本爱丘山。林下漏月光，疏疏如残雪.长亭外古道边，芳草碧连天。少无适俗韵，性本爱丘山。林下漏月光，疏疏如残雪.长亭外古道边，芳草碧连天</p>
                    </div>
                </aside>
            </div> <!--harf end-->
            <div class="harf">
                <div class="tab blue">
                    <input id="tab-four" type="radio" name="tabs2" />
                    <label for="tab-four">label four</label>
                    <div class="tab-content">
                        <p>少无适俗韵，性本爱丘山。林下漏月光，疏疏如残雪.长亭外古道边，芳草碧连天。少无适俗韵，性本爱丘山。林下漏月光，疏疏如残雪.长亭外古道边，芳草碧连天</p>
                    </div>
                </div>
                <div class="tab blue">
                    <input id="tab-five" type="radio" name="tabs2" />
                    <label for="tab-five">label five</label>
                    <div class="tab-content">
                        <p>少无适俗韵，性本爱丘山。林下漏月光，疏疏如残雪.长亭外古道边，芳草碧连天。少无适俗韵，性本爱丘山。林下漏月光，疏疏如残雪.长亭外古道边，芳草碧连天</p>
                    </div>
                </div>
            </div>
        </div>

css代码：

.wrapper{
    width: 500px;
}
.harf{
    margin-bottom: 20px;
}
.tab{
    position: relative;
    margin-bottom: 1px;
    width: 100%;
    color: #fff;
    overflow: hidden;
}
input{
    position: absolute;
    opacity: 0;
    z-index: -1;
}
label{
    position: relative;
    display: block;
    padding: 0 0 0 1em;
    background: #16A085;
    font-weight: bold;
    line-height: 3;
    cursor: pointer;
}
.blue label{
    background: #2980B9;
}
.tab-content{
    max-height: 0em;
    overflow: hidden;
    background: #1ABC9C;
    -webkit-transition: max-height .35s;
    transition: max-height .35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content p{
    margin: 1em;
}
input:checked ~ .tab-content{
    max-height: 10em;
}
label::after{
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 3em;
    height: 3em;
    line-height: 3em;
    text-align: center;
    -webkit-transition: all .35s;
    transition: all .35s;
}
input[type=checkbox] + label:after{
    content: "+";
}
input[type=checkbox]:checked + label:after{
    -webkit-transform:rotate(315deg) ;
}
input[type=radio] + label::after {
     content: "\25BC";
}
input[type=radio]:checked + label::after{
     -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}