基于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实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
详解原生JS动态添加和删除类
Mar 26 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
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 error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
Three.js基础部分学习
2017/01/08 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
行政人事岗位职责
2014/03/17 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
党员作风建设自查报告
2014/10/23 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers