Implementation of accordion accordion custom plugin based on jquery _jquery

At present, there are many kinds of accordion plug-ins on the internet, but there is not a complete implementation of the side menu, today has written an infinite sub-node accordion side menu, there is a need to refer to, what good ideas can leave a message. (not thoroughly tested, but less problematic)

The following old rules, directly paste code:

(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-cont Ent ", 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 +" </spa
      N></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_collaps
        E + "' ></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 to 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.2
      Em }. 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 {posit
        ion:relative;
      left:-3px; }. accordion-content > Accordion-header > Accordion-header-title.selected > Span {position:rela
        tive;
        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; }

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.