手风琴插件

html

<a href="javascript:;" onclick="add()">添加</a>
<a href="javascript:;" onclick="removea()">删除特定行</a>
<ul class= "pms-accordion-box" id="pms-accordion"></ul>

css

a{color: #999;text-decoration: none;}
ul,li{padding: 0;margin: 0;list-style: none;}
/* 自定义手风琴 */
.pms-accordion{}
.pms-accordion-title{overflow: hidden;background: #ebf0f5;color: #2387aa;padding: 5px;margin: 10px 0;}
.pms-accordion-title .pms-icon-pr{float: left;}
.pms-accordion-title .pms-accordion-handle{float: right;}
.pms-accordion-body{display: none;}
.pms-accordion-title .icon-minus {display: none;}
.pms-accordion-title .icon-plus {display: inline-block;}
.pms-accordion-title.pms-accordion-open .icon-minus {display: inline-block;}
.pms-accordion-title.pms-accordion-open .icon-plus {display: none;}

插件js

(function($){
	var pmsAccordiond = function(el, opt, param){
		this.opt = opt;
		this.el = el;
	}
	$.fn.pmsAccordion = function(opt,param){
		var pa = new pmsAccordiond($(this), opt , param);
		if( !param ){
			pa.init();
		}
		if(param == "removeDom"){
			pa.removeDom(opt);
		}
		if(param == "addDom"){
			pa.addDom(opt);
		}
	}
	pmsAccordiond.prototype = {
		init : function(){
			var _pmsAccordionData = this.opt.data;
			var editFn = this.opt.editFn;
			var deleteFn = this.opt.deleteFn;
			var _addDom = this.opt.addDom;
			var _removeDom = this.opt.removeDom;
			this.creatDom(_pmsAccordionData,editFn,deleteFn);
			if (_addDom) {
				this.addDom(_addDom);
			}
			if (_removeDom) {
				this.removeDom(_removeDom);
			}
		},
		dom : function(_data){
			var _h = "";
			_h += '<li class = "pms-accordion">';
			_h += '<div class = "pms-accordion-title">';
			_h += '<i class = "pms-icon-pr iconfont icon-plus"></i>';
			_h += '<i class = "pms-icon-pr iconfont icon-minus"></i>';
			_h += _data.title;
			_h += '<div class = "pms-accordion-handle">';
			if(_data.editAble == true){
				_h += '<a href = "javascript:;" class="pms-edit"><i class = "iconfont icon-edit"></i></a>';
			}
			if(_data.deleteAble == true){
				_h += '<a href = "javascript:;" class="pms-delete"><i class = "iconfont icon-delete"></i></a>';
			}
			_h += '</div>';
			_h += '</div>';
			_h += '<div class = "pms-accordion-body">';
			_h += _data.content;
			_h += '</div>';
			_h += '</li>';
			this.el.append(_h);
		},
		creatDom : function(_pmsAccordionData,editFn,deleteFn){
			if(_pmsAccordionData){
				for( var i = 0; i < _pmsAccordionData.length; i++ ){
					this.dom(_pmsAccordionData[i]);
				}
			}
			//点击实现动画
			this.el.on("click",".pms-accordion .pms-accordion-title",function(e){
				var ev = e || event;
				if($(this).hasClass("pms-accordion-open")){
					$(this).removeClass("pms-accordion-open");
				}else{
					$(this).addClass("pms-accordion-open");
				}
				$(this).parents(".pms-accordion").siblings().find(".pms-accordion-body").stop().slideUp();
				$(this).parents(".pms-accordion").siblings().find(".pms-accordion-title").removeClass("pms-accordion-open");
				$(this).siblings(".pms-accordion-body").stop().slideToggle();
				ev.stopPropagation();
			});
			this.el.on("click",".pms-accordion .pms-accordion-handle .pms-edit",function(e){
				var ev = e || event;
				var _index = $(this).parents(".pms-accordion").index();
				if(typeof(editFn) == "function"){
					editFn(_index);
				}
				ev.stopPropagation();
			});
			this.el.on("click",".pms-accordion .pms-accordion-handle .pms-delete",function(e){
				var ev = e || event;
				var _index = $(this).parents(".pms-accordion").index();
				if(typeof(deleteFn) == "function"){
					deleteFn(_index);
				}
				ev.stopPropagation();
			});
		},
		addDom : function(opts){
			this.dom(opts);
		},
		removeDom : function(opts){
			this.el.find("li")[opts.index].remove();
		}
	}
	
})(jQuery);