Difference between revisions of "Team:OUC-China/mbhjc"

Line 31: Line 31:
 
      
 
      
 
      
 
      
−
.item{
+
body {
−
        position: relative;
+
    margin: 20px;
−
        border:1px solid #CCC;
+
    font-family: avenir, sans-serif;
−
        padding:5px;
+
}
−
    }
+
.toggle {
−
    .title{
+
    display: none;
−
        height: 30px;
+
}
−
    }
+
.list {
−
    .item input[type=checkbox]{
+
    display: inline-block;
−
        opacity: 0;
+
    vertical-align: top;
−
        position: absolute;
+
    width: 200px;
−
        top:0;
+
    margin: 0 20px 20px 0;
−
        left:0;
+
    padding: 10px;
−
        width:100%;
+
    border: 1px solid #000;
−
        height: 30px;
+
}
−
        z-index:2;
+
.title {
−
     }
+
    margin: 0 0 1em;
−
    .item .ico{
+
    padding: 0.25em 5px;
−
      position: absolute;
+
}
−
      right:5px;
+
.item {
−
      top:5px;
+
    overflow: hidden;
−
      -webkit-transform: rotate(-90deg);
+
}
−
      transform: rotate(-90deg)
+
.item:nth-of-type(n+6) {
−
    }
+
    max-height: 0;
−
    .item .ico:after{
+
    opacity: 0;
−
      content:'>';
+
    -webkit-transition: opacity 500ms, max-height 200ms;
−
    }
+
    transition: opacity 500ms, max-height 200ms;
−
    .item input[type=checkbox]:checked+.ico{
+
    -webkit-transition-delay: 0s, 500ms;
−
      -webkit-transform: rotate(90deg);
+
    transition-delay: 0s, 500ms;
−
      transform: rotate(90deg)
+
}
−
     }
+
.toggle:checked + .list .item:nth-of-type(n+6) {
−
    input[type=checkbox]:checked~.content{
+
    max-height: 4em;
−
      display: none;
+
    opacity: 1;
−
     }
+
    -webkit-transition-delay: 200ms, 0s;
 +
     transition-delay: 200ms, 0s;
 +
}
 +
.item:nth-of-type(n+6) ~ .more {
 +
    display: block;
 +
    padding: 0.25em 5px;
 +
    cursor: pointer;
 +
    text-transform: uppercase;
 +
    border: 1px dashed #000;
 +
}
 +
.item:nth-of-type(n+6) ~ .more:before {
 +
    content: attr(data-toggle-open);
 +
}
 +
.toggle:checked + .list .item:nth-of-type(n+6) ~ .more:before {
 +
    content: attr(data-toggle-close);
 +
}
 +
.no-touch .item:nth-of-type(n+6) ~ .more:hover {
 +
     background-color: #eee;
 +
}
 +
.link {
 +
    display: block;
 +
    padding: 0.25em 5px;
 +
    color: #000;
 +
    text-decoration: none;
 +
     -webkit-transition: background-color 500ms;
 +
    transition: background-color 500ms;
 +
}
 +
.no-touch .link:hover {
 +
    background-color: #eee;
 +
}
 
      
 
      
 
      
 
      
Line 196: Line 225:
 
                                          
 
                                          
 
                                          
 
                                          
−
<div class="item">
+
<h2>使用纯CSS实现的可折叠展开的链接列表</h2>
−
        <div class="title">垃圾信息举报</div>
+
 
−
        <input type="checkbox">
+
<input type="checkbox" id="list1" class="toggle" />
−
        <span class="ico"></span>
+
<div class="list">
−
        <div class="content">
+
    <h4 class="title">Lots of links</h4>
−
          感谢您的反馈
+
    <div class="item"><a href="#" class="link">techbrood.com</a>
−
        </div>
+
    </div>
 +
    <div class="item"><a href="#" class="link">wow.techbrood.com</a>
 +
    </div>
 +
    <div class="item"><a href="#" class="link">yii2.techbrood.com</a>
 +
    </div>
 +
    <div class="item"><a href="#" class="link">wear.techbrood.com</a>
 +
    </div>
 +
    <div class="item"><a href="#" class="link">ideas.techbrood.com</a>
 +
    </div>
 +
    <div class="item"><a href="#" class="link">3d.techbrood.com</a>
 +
    </div>
 +
    <div class="item"><a href="#" class="link">gd.techbrood.com</a>
 +
    </div>
 +
    <div class="item"><a href="#" class="link">geeks.techbrood.com</a>
 +
    </div>
 +
    <label for="list1" class="more" data-toggle-open="View all" data-toggle-close="View less"></label>
 
</div>
 
</div>
  

Revision as of 13:17, 15 October 2018

Team OUC-China: Main jQuery UI 折叠面板（Accordion） - 非自动高度
banner
Contact Us : oucigem@163.com | ©2018 OUC IGEM.All Rights Reserved. | ......