JQuery

1个成员

jquery 折叠菜单代码

发表于 2017-02-01 3328 次查看
这是一款用jquery实现的在线帮助手册的折叠菜单效果代码哦。

;(function($) {

function load(settings, root, child, container) {
 $.getJSON(settings.url, {root: root}, function(response) {
  function createNode(parent) {
   var current = $("<li/>").attr("id", this.id || "").html("<span>" + this.text + "</span>").appendTo(parent);
   if (this.classes) {
    current.children("span").addClass(this.classes);
   }
   if (this.expanded) {
    current.addClass("open");
   }
   if (this.hasChildren || this.children && this.children.length) {
    var branch = $("<ul/>").appendTo(current);
    if (this.hasChildren) {
     current.addClass("hasChildren");
     createNode.call({
      text:"placeholder",
      id:"placeholder",
      children:[]
     }, branch);
    }
    if (this.children && this.children.length) {
     $.each(this.children, createNode, [branch])
    }
   }
  }
  $.each(response, createNode, [child]);
        $(container).treeview({add: child});
    });
}

var proxied = $.fn.treeview;
$.fn.treeview = function(settings) {
 if (!settings.url) {
  return proxied.apply(this, arguments);
 }
 var container = this;
 load(settings, "source", this, container);
 var userToggle = settings.toggle;
 return proxied.call(this, $.extend({}, settings, {
  collapsed: true,
  toggle: function() {
   var $this = $(this);
   if ($this.hasClass("hasChildren")) {
    var childList = $this.removeClass("hasChildren").find("ul");
    childList.empty();
    load(settings, this.id, childList, container);
   }
   if (userToggle) {
    userToggle.apply(this, arguments);
   }
  }
 }));
};

})(jQuery);

发表回复
你还没有登录,请先登录注册