jQuery CSS3折叠卡片式下拉列表框实现效果

jQuery下拉列表框特效将每一个列表项都制作为卡片的样式，打开和关闭它有打开和关闭百叶窗的感觉，效果非常不错，分享给大家。

简要教程超文本标记语言结构该下拉列表框特效的列表项使用一个无序列表来制作，用于切换打开和关闭状态的元素是一个超链接元素。

div class=' container ' div class=' card-drop ' a class=' toggle ' href=' # ' I class=' fa-行李箱/I span class=' label-active ' everything/span/a ul Li class=' active ' a data-label=' everything ' href=' # ' I class=' fa-行李箱/我什么都有/a/李./ul /div/divCSS样式切换元素用于切换下拉列表的打开和关闭状态。为了制作点击时卡片上翻的效果，它被设置了变换样式： preserve-3d；属性。同时修改了转换的原点转换-原始： 50% 0%;放下a .拨动{位置：相对；z指数： 100；蚊子背面-可见性：隐藏；-网络套件-背面-可见度：隐藏；背面-可见性：隐藏；-moz-transform-style : preserve-3d；-web套件-转换-style : preserve-3d；变换样式： preserve-3d；-moz-transform-origin : 50% 0%；-ms-transform-origin : 50% 0%；-web套件-转换-origin : 50% 0%；转换-原始： 50% 0%;-moz-transit :线性0.1s-o-transit :线性0.1s-网络套件-transit :线性0.1跃迁：线性0.1s}但它处于激活状态的时候，它会沿X轴进行旋转，并使用：以前和：after伪元素来制作角部三角形效果。降卡a .切换：活动{-moz-transform : Rotatex(60度)；-网络套件-transform : Rotatex(60度)；变压器： Rotatex(60度);}.在{-moz-transform : rotateX(180)之后，卡-掉a . toggle :激活：-网络套件-transform : Rotatex(180度)；变压器： Rotatex(180度);}.之前丢过a.toggle:before之前.{内容： }之后的落卡a .拨动开关：绝对位置：}.在{ right: 25px之前放入a . toggle : before top : 50%；边距-top :-2.5px；边框-左侧： 6px实心透明；右边框： 6px纯色透明；边框-top: 6px实心rgba(0，0，0，0.8)；}.在{ transform:旋转(180度)之前，卡放下开关。激活：} 列表项在切换时只是简单的使用jQuery来修改它们的顶部、宽度和左边距属性，使其显示和隐藏。并使用放松作为半铸钢钢性铸铁(铸造半钢)动画过渡效果。落卡ul { position:绝对值高度： 100%;top : 0；显示器：块；宽度： 100%;}.落卡ul Li { margin : 0 auto-moz-transit : all，缓和0.3s-o-transit : all，缓和0.3s-WebKit-transit : all，轻松退出0.3s；transition: all，缓和0.3s绝对位置：top : 0；z-index : 0；宽度： 100%;}.卡-丢弃保险商实验所阿利{ border-top:无；}.卡-放下ul阿利：悬停{背景色： # 4 aa3dfcolor: # f3f9fd}。降卡ul li.active a { color: # fff背景色： # 258 CD 1；光标：默认值；}.甩卡ul李。关闭了：悬停{光标：默认；背景-color : # 3498 db；} JavaScript

在jQuery代码中，setClosed()函数用于关闭所有的列表项，默认它们是处于关闭状态的。

函数setClosed() { li .每个(函数（索引){ $(这个)).css('top '，索引* 4)。css('width '，width - index * 0.5 '% ').css('margin-left '，index * 0.25 ' % ')；});李。addCLaSS(' closed ')；托格勒。移除类(“活动的”)；} setClosed()；然后监听。触发器元素的鼠标放下事件，该事件中切换列表的打开和关闭状态。

toggler.on('mousedown '，function(){ var $ this=$(this)；if ($this.is ' .active '){ setClosed()；} else { $ this。add CLaSS(' active ')；李。移除类(' closed ')；li .每个(函数（索引){ $(这个)).css('top '，60 *(索引1))。css(“”宽度',' 100% ')。css(“”左边距，' 0px ')；});}});最后在每一个列表项被点击的时候，将该列表项的内容移动到第一项中，被关闭整个下来列表。

links.on('click '，function (e) { var $this=$(this)，label=$ this。数据('标签')；icon=$this.children('i ').attr(' class ')；李。移除类(“活动的”)；if ($this.parent('li ').是(' active '){ $ this。父母(“李”).移除CLaSS(' active ')；} else { $this.parent('li ').添加CLaSS(' active ')；} toggler.children('span ').文本（标签);toggler.children('i ').removeClass().addClass(图标);setClosed()；e . PreventDefault })；以上就是为大家分享的jQuery和CSS3制作的效果，非常炫酷的下拉列表框特效，希望大家喜欢