HTML手风琴原理,手风琴.html

dodou-移动框架

.accordion li{ border-bottom:1px solid #ececec; }

.accordion .accordion-tit{position: relative;}

.accordion .accordion-tit:after {

content: " ";

display: inline-block;

-webkit-transform: rotate(135deg);

transform: rotate(135deg);

height: 6px;

width: 6px;

border-width: 2px 2px 0 0;

border-color: #c8c8cd;

border-style: solid;

position: absolute;

right: 15px;

top: 50%;

margin-top: -3px;

}

.accordion .weui-cells{ margin-top: 0; display: none; background:#f2f2f2;}

.accordion li.cur{ border-bottom:none; }

.accordion li.cur .accordion-tit:after{

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

margin-top: 0;

}

.accordion li.cur .weui-cells{ display: block; }

• 

  我的好友(2/2)

  

  标题文字

  

  标题文字

  说明文字

  

  数据统计

• 我的好友(2/2)

  

  标题文字

  

  标题文字

$('.accordion-tit').click(function(){

$parent = $(this).parent('li');

if($parent.hasClass('cur')){

$parent.removeClass('cur');

$parent.siblings().removeClass('cur');

}else{

$parent.addClass('cur');

$parent.siblings().removeClass('cur');

}

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史