基于Html5折叠卡片式下拉菜单插件教程

一、Html结构<div class="container"><div class="card-drop"><a class='toggle' href="#"><i class='fa fa-suitcase'></i><span class='label-active'>移动广告平台</span></a><ul><li class='active'><a data-label="EveryTing" href="#"><i class='fa fa-suitcase'></i>移动广告平台</a></li><li><a data-label="Design" href="#"><i class='fa fa-magic'></i> Keymob移动广告平台</a></li><li><a data-label="UI-UX" href="#"><i class='fa fa-bolt'></i>多盟移动广告平台</a></li><li><a data-label="Print" href="#"><i class='fa fa-Tint'></i>芒果移动广告</a></li><li><a data-label="Photography" href="#"><i class='fa fa-camera-retro'></i>有米广告平台</a></li><li><a data-label="Photography" href="#"><i class='fa fa-camera-retro'></i>安沃传媒</a></li></ul></div></div>二、JS结构(function ($) {var cards = $('.card-drop'),toggler = cards.find('.toggle'),links = cards.find('ul>li>a'),li = links.parent('li'),count = links.length,width = 100;li.each(function (i) {$(this).css('z-index',count - i); });function setClosed() {li.each(function (indeX) {$(this).css('top',index * 4).css('width',width - index * 0.5 + '%').css('margin-left',index * 0.25 + '%');});li.addClass('closed');toggler.removeClass('active');}setClosed();toggler.on('mousedown',function () {var $this = $(this);if ($this.is('.active')) {setClosed();} else {$this.addClass('active');li.removeClass('closed');li.each(function (indeX) {$(this).css('top',60 * (index + 1)).css('width','100%').css('margin-left','0px');});}});links.on('click',function (E) {var $this=$(this),label =$this.data('label');icon=$this.children('i').attr('class');li.removeClass('active');if ($this.parent('li').is('active')) {$this.parent('li').removeClass('active');} else {$this.parent('li').addClass('active');}toggler.children('span').text(label);toggler.children('i').removeClass().addClass(icon);setClosed();e.preventDefault;});}(jQuery));Keymob是目前国内领先的移动端广告平台，聚合了国内外主流的移动广告平台，是国内知名的移动移动广告平台，成为应用开发者手机广告优化之首选。