html 折叠详情代码,web折叠菜单

　　基于html5代码实现折叠菜单附源码下载。效果图如下所示，喜欢的亲们还可以下载源码哦！

　　效果展示源码下载

　　hmtl代码:

　　复制代码代码如下：

　　div class=容器

　　div class=卡片掉落

　　a class=toggle href=#

　　I=fa fa-行李箱/i

　　span class=label-active 爱编程/span

　　保险商实验所

　　李主动出击

　　a data-label= everything href= # I class= fa fa-行李箱/i爱编程/a

　　/李

　　里

　　data-label= Design href= # I class= fa fa-magic /I jQuery特效/a

　　/李

　　里

　　a data-label= UI-UX href= # I class= fa fa-bolt /I CSS3特效/a

　　/李

　　里

　　a data-label= Print href= # I class= fa fa-tint /I html 5特效/a

　　/李

　　里

　　a data-label= Photography href= # I class= fa fa-camera-retro /I音效下载/a

　　/李

　　里

　　一个data-label= Photography href= # I fa fa-camera-retro /I闪光灯动画/a

　　/李

　　/ul

　　/div

　　js代码：

　　复制代码代码如下：

　　（函数($) {

　　定义变量卡=$(。card-drop )、toggler=cards.find( .toggle )、links=cards.find(ullia )、li=links.parent(li )、count=links.length，width=100

　　李.每个(函数{

　　$(这个)。css(z-index ，count-I)；

　　});

　　函数setClosed() {

　　李.每个(函数（索引){

　　$(这个)。css(top ，index * 4).css(width ，width - index * 0.5 % ).css(margin-left ，index * 0.25 %)；

　　});

　　李。add class(“closed”)；

　　为ggler干杯。移除类(“active”)；

　　}

　　set closed()；

　　toggler.on(mousedown ，function () {

　　var $ this=$(this)；

　　如果(这.是(.活动)){

　　set closed()；

　　}否则{

　　$这个。add class(“active”)；

　　李。移除类(" closed ")；

　　李.每个(函数（索引){

　　$(这个)。css(top ，60 *(索引1))。css(宽度, 100% )。css(左边距，‘0px’)；

　　});

　　}

　　});

　　links.on(点击，功能(e) {

　　var $this=$(this)，label=$ this。数据(“标签”)；

　　icon=$this.children(i ).attr( class )；

　　李。移除类(“active”)；

　　如果($这个。父(李).是(活动){

　　$this.parent(li ).移除类(“active”)；

　　}否则{

　　$this.parent(li ).添加类(“活动”)；

　　}

　　toggler.children(span ).文本（标签);

　　toggler.children(i ).removeClass()。添加类(图标);

　　set closed()；

　　e。预防违约；

　　});

　　}(jQuery))；

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读