zoukankan      html  css  js  c++  java
  • CSS实现折叠面板

    <!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时候用到了兄弟选择器,经试验,可以使用多个“+”选择兄弟的兄弟等。

  • 相关阅读:
    设计工具
    makefile介绍1.0
    cpp命名空间
    第二课 生活智慧
    第一课 我想找到好工作,我想挣钱
    php CURL
    apache 改变文档根目录www的位置
    yii2 模块的创建及使用
    yii2 源码分析Action类分析 (六)
    yii2 源码分析 model类分析 (五)
  • 原文地址:https://www.cnblogs.com/deerfig/p/6635176.html
Copyright © 2011-2022 走看看