CSS实现折叠面板

最新推荐文章于 2025-03-22 13:53:46 发布

Liuzhongbao123456

最新推荐文章于 2025-03-22 13:53:46 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/deerfig/p/6635176.html

版权

本文探讨了在CSS中实现折叠面板的动画效果，重点在于使用transition和visibility属性。使用display:none时，由于元素从视图中消失，transition无法生效。而visibility:hidden则保留元素的物理位置，使得transition能正常工作。同时提到了可以使用多个相邻兄弟选择器来选取更远的兄弟元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用CSS实现折叠面板</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<input type="radio" id="item1" name="item"><label for="item1">Item1</label>
<div class="context hiddenDiv"><span>span123span css html javascript jquery angularJS nodeJS
 css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS</span></div>
<input type="radio" id="item2" name="item"><label for="item2">Item2</label>
<div class="context hiddenDiv"><span>hello world hello world hello world hello world hello world hello world hello world hello world hello world
 css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS
 css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS</span></div>
<input type="radio" id="item3" name="item"><label for="item3">Item3</label>
<div class="context hiddenDiv"><span>hello world hello world hello world hello world hello world hello world hello world hello world hello world
 hello world hello world hello world hello world hello world hello world hello world hello world hello world
    hello world hello world hello world hello world hello world hello world hello world hello world hello world
</span></div>


</div>



</body>
</html>

*{
    margin:0;
    padding:0;

}
html,body{
    width:100%;
    height:100%;
}
.container{
    width:80%;
    height:400px;
    margin:0 auto;
    margin-top:30px;
    border:1px solid #dddddd;
    border-radius:1px;
}
input{
    display:none;
}
label{
    display:block;
    background-color: #F5F5F5;
    width:99%;
    height:40px;
    margin:0 auto;
    border:1px solid #dddddd;
    border-radius:2px;
    margin-top:5px;
    line-height: 40px;
}
.context{
    width:99%;
    height:0px;
    margin:0 auto;
    border:1px solid #dddddd;
    border-radius:2px;
    visibility: hidden;
    transition:height 0.5s linear;
    -webkit-transition:height 0.5s linear;
    -moz-transition:height 0.5s linear;
    -ms-transition:height 0.5s linear;
}
input:checked + label + .context{
    visibility: visible;
    height:150px;
}

1、处理折叠和展开的动画效果时候，使用transition（过渡效果），开始隐藏div时候使用了display：none; transition没有效果，因为视图中已经没有div的物理位置，重新block后，回流和渲染，而visbility：hidden还保留其物理位置，只需要渲染就可以，transition起作用，记得以前做东西时候，经常会遇到相似的问题，但是，可能对display先入为主，总是先想到这个小玩意去隐藏元素，display会影响transition的效果，dom元素要在视图中有位置，才能进行一系列动画效果，注意这一点。

2、处理div时候用到了兄弟选择器，经试验，可以使用多个“+”选择兄弟的兄弟等。

转载于:https://www.cnblogs.com/deerfig/p/6635176.html