基于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 相关文章推荐
jquery CSS选择器笔记
Mar 29 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 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 删除cookie和浏览器重定向
2009/03/16 PHP
PHP 实用代码收集
2010/01/22 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
laravel请求参数校验方法
2019/10/10 PHP
jQuery列表拖动排列具体实现
2013/11/04 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
python中正则表达式的使用详解
2014/10/17 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
营销总经理岗位职责
2014/02/02 职场文书
环保专项行动方案
2014/05/12 职场文书
老龙头导游词
2015/02/11 职场文书
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript