css实现折叠面板

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/qq_22755565/article/details/78603167

纯css实现折叠面板

本例实现了已知高度元素的显示与折叠，但不能应用于高度不固定的元素

   <input type="checkbox" class="fold-button">
   <section>
       <div class="fold-content"></div>
    </section>

   .fold-button{
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance:none; 
        width: 30px;
        height: 20px;
        border-radius: 4px;
        background: red;
    }
    .fold-button:checked{
        background: green;
    }
    .fold-button + section{
        overflow: hidden;
    }
    .fold-button + section > div.fold-content{
        /* 高度仍然存在(仍然占位) */
        /* transform: translateY(0);
        transform-origin: top; */
        /* 太生硬没有过渡效果 */
        /* display: block; */
        /* 撑不开父级 */
        /* position: absolute;
        top: 0;
        left: 0; */
        /* 高度仍然存在(仍然占位) */
        /* position: relative;
        top: 0; */
        height: 200px;
        background: #def;
        border-radius: 4px;
        opacity:1;
        overflow: hidden;
        transition: height 1s ease-out, opacity 1s ease-out;
        -moz-transition: height 1s ease-out, opacity 1s ease-out;
    }

    .fold-button:checked + section > div.fold-content{
        opacity:0;
        height: 0;
        /* 高度仍然存在(仍然占位) */
        /* transform: translateY(-100%); */
        /* 太生硬没有过渡效果 */
        /* display: none; */ 
        /* 撑不开父级 */
        /* top: -100%; */
    }