基于jQuery实现Accordion手风琴自定义插件


Posted in Javascript onOctober 13, 2020

目前网上有很多各种各样的手风琴插件,但是没有一个完整实现了的侧菜单,今天写了一个可以无限子节点的手风琴侧菜单,有需要的可以参考一下,有什么好的想法可以留言。(没有经过彻底测试,不过问题应该不大)

下面老规矩,直接贴代码:

(function ($) {
 'use strict';
 var defaults = {
  url: null,
  param: {},
  data: {},
  fill: true,
  level_space: 15,
  onitemclick: null,
  style: {
   header: "accordion-header",
   header_title: "accordion-header-title",
   content: "accordion-content",
   selected: "selected",
   icon_base: "fa",
   icon_collapse: "fa-angle-up",
   icon_expand: "fa-angle-down"
  }
 }
 var methods = {
  init: function (options) {
   return this.each(function () {
    var $this = $(this);
    if (!$this.hasClass("accordion")) {
     $this.addClass("accordion");
    }
    var settings = $this.data('tw.accordion');
    if (typeof (settings) == 'undefined') {
     settings = $.extend({}, defaults, options);
     $this.data('tw.accordion', settings);
    } else {
     settings = $.extend({}, settings, options);
     $this.data('tw.accordion', settings);
    }
    if (settings.url) {
     $.ajax({
      type: "post",
      async: false,
      url: settings.url,
      data: settings.param,
      success: function (data) {
       settings.data = data;
      }
     });
    }
    if (settings.fill) {
     $this.height("100%");
    }
    if (settings.data.length > 0) {
     $this.data("count", settings.data.length);
     $.each(settings.data, function () {
      this.level = 1;
      var item = $this.accordion("add", this);
      $this.append(item);
     });
     if ($this.find("." + settings.style.selected).length == 0) {
      var data = $this.find(">li:first-child").data("data");
      $this.accordion("select", data);
     }
    }
   });
  },
  add: function (data) {
   var $this = $(this);
   var settings = $this.data("tw.accordion");
   var item = $("<li class='" + settings.style.header + "'></li>");
   item.data("data", data);
   var header = $("<div class='" + settings.style.header_title + "' data-accordion='" + data.id + "'>" +
    "<i class='" + settings.style.icon_base + "" + data.icon + "'></i>" +
    "<span>" + data.name + "</span></div>");
   header.css("padding-left", settings.level_space * data.level);
   item.append(header);
   if (data.childrens) {
    var toggle = $("<i class='" + settings.style.icon_base + "" + settings.style.icon_collapse + "'></i>");
    toggle.css({ "font-size": "1.4em", "position": "absolute", "top": "7px", "right": "7px" });
    header.append(toggle);
    var content = $("<ul class='" + settings.style.content + "'></ul>");
    content.data("count", data.childrens.length);
    $.each(data.childrens, function () {
     this.level = data.level + 1;
     var child = $this.accordion("add", this);
     content.append(child);
    });
    item.append(content);
   }
   header.click(function () {
    $this.accordion("select", data);
   });
   if (data.selected) {
    $this.accordion("select", data);
   }
   return item;
  },
  select: function (data) {
   var $this = $(this);
   var settings = $this.data("tw.accordion");
   var header = $this.find("[data-accordion='" + data.id + "']");
   var item = header.parent();
   if (!header.hasClass(settings.style.selected) && !item.hasClass(settings.style.selected)) {
    var sibling = item.siblings();
    sibling.removeClass(settings.style.selected).children("." + settings.style.selected).removeClass(settings.style.selected);
    sibling.children("." + settings.style.icon_expand).removeClass(settings.style.icon_expand).addClass(settings.style.icon_collapse);
    if (data.childrens) {
     item.addClass(settings.style.selected);
     header.find("." + settings.style.icon_collapse).removeClass(settings.style.icon_collapse).addClass(settings.style.icon_expand);
     if (settings.fill) {
      var count = item.parent().data("count") - 1;
      item.css("height", "calc(100% - " + (item.height() * count) + "px)");
     }
    } else {
     header.addClass(settings.style.selected);
    }
   }
   if (settings.onitemclick) {
    settings.onitemclick(data);
   }
  },
  update: function (url, param) {
   var $this = $(this);
   var settings = $this.data("tw.accordion");
   if (typeof url == "object") {
    settings.param = url;
   } else {
    settings.url = url;
    settings.param = param;
   }
   $this.accordion("init", settings);
  },
  destroy: function (options) {
   return $(this).each(function () {
    var $this = $(this);
    $this.removeData('accordion');
   });
  }
 }
 $.fn.accordion = function () {
  var method = arguments[0];
  var args = arguments;
  if (typeof (method) == 'object' || !method) {
   method = methods.init;
  } else if (methods[method]) {
   method = methods[method];
   args = $.makeArray(arguments).slice(1);
  } else {
   $.error('Method ' + method + ' does not exist on tw.accordion');
   return this;
  }
  return method.apply(this, args);
 }
})(jQuery);
.accordion {
 margin:0;
 padding:0;
 font-size:14px;
}
 .accordion > .accordion-header {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ddd;
 }
  .accordion > .accordion-header.selected > .accordion-header-title {
   color: #0094ff;
  }
  .accordion > .accordion-header > .accordion-header-title {
   position: relative;
   width: 100%;
   height: 35px;
   line-height: 35px;
   background: #eee;
   border-bottom: 1px solid #ccc;
   cursor: pointer;
  }
   .accordion > .accordion-header > .accordion-header-title > i:first-child {
    font-size: 1.3em;
   }
   .accordion > .accordion-header > .accordion-header-title > span {
    position: relative;
    top: -1px;
    left: 5px;
   }
  .accordion > .accordion-header > .accordion-content {
   display: none;
   width: 100%;
   height: calc(100% - 35px);
   margin: 0;
   padding: 0;
  }
  .accordion > .accordion-header.selected > .accordion-content {
   display: block;
  }
.accordion-content > .accordion-header {
  list-style: none;
  margin: 0;
  padding: 0;
}
 .accordion-content > .accordion-header.selected {
  color: #0094ff;
 }
 .accordion-content > .accordion-header > .accordion-header-title {
  position: relative;
  width: 100%;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
 }
  .accordion-content > .accordion-header > .accordion-header-title:hover {
   background:#eee;
  }
  .accordion-content > .accordion-header > .accordion-header-title.selected {
   color: #fff;
   background: #0094ff;
   border-left: 3px solid #ff6a00;
   border-bottom: 0px;
  }
   .accordion-content > .accordion-header > .accordion-header-title > i:first-child {
    font-size: 1.2em;
   }
   .accordion-content > .accordion-header > .accordion-header-title > span {
    position: relative;
    top: -1px;
    left: 5px;
   }
   .accordion-content > .accordion-header > .accordion-header-title.selected > i:first-child {
    position:relative;
    left:-3px;
   }
   .accordion-content > .accordion-header > .accordion-header-title.selected > span {
    position: relative;
    top: -1px;
    left: 2px;
   }
  .accordion-content > .accordion-header > .accordion-content {
   display: none;
   width: 100%;
   height: calc(100% - 32px);
   margin: 0;
   padding: 0;
  }
  .accordion-content > .accordion-header.selected > .accordion-content {
   display: block;
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 #Javascript
js原生实现FastClick事件的实例
Nov 20 #Javascript
常用原生js自定义函数总结
Nov 20 #Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 #Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 #Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 #Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 #Javascript
You might like
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
简单的js分页脚本
2009/05/21 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
Python 文件和输入输出小结
2013/10/09 Python
python读写ini文件示例(python读写文件)
2014/03/25 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
django页面跳转问题及注意事项
2019/07/18 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
C语言面试题
2013/05/19 面试题
电信专业毕业生推荐信
2013/11/18 职场文书
继电保护工岗位职责
2014/01/05 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python