如何实现导航菜单的二级折叠功能？

本文共计1212个文字，预计阅读时间需要5分钟。

javascriptfunction (require) { var ClassEvent=require(/classevent); var Extend=require(/extend); // 用于生成只有两级的可折叠菜单 function AccordionMenu(setting) { // ... }}

gistfile1.txt

define(function (require) { var ClassEvent = require("./classevent"); var Extend = require("./extend"); //var $ = require("jquery"); /** * 用于生成只有两级的可折叠的菜单 */ function AccordionMenu(setting) { ClassEvent.call(this); this.setting = setting; this.accordin = null; } AccordionMenu.prototype.Init = function () { this.accordin = this.initAccordin(); return this; } AccordionMenu.prototype.GetAccordionDom = function () { return this.accordin; } AccordionMenu.prototype.CloseItem = function (parm) { this.accordin.accordion("close", parm); } AccordionMenu.prototype.OpenItem = function (parm) { this.accordin.accordion("open", parm); } /** * 获取展开的item */ AccordionMenu.prototype.GetExtendData = function () { return this.accordin.find($.fn.accordion.settings.selector.title + "." + $.fn.accordion.settings.className.active).data("accordinitemtitle"); } AccordionMenu.prototype.GetExtendContent = function () { return this.accordin.find($.fn.accordion.settings.selector.content + "." + $.fn.accordion.settings.className.active) } AccordionMenu.prototype.GetExtendTitle = function () { return this.accordin.find($.fn.accordion.settings.selector.title + "." + $.fn.accordion.settings.className.active) } //onOpening : function(){}, // callback before open animation //onOpen : function(){}, // callback after open animation //onClosing : function(){}, // callback before closing animation //onClose : function(){}, // callback after closing animation //onChange : function(){}, // callback after closing or opening animation AccordionMenu.prototype.initAccordin = function () { var self = this; var acc = $("

"); acc.addClass("ui vertical menu accordion"); var accitem; for (var i = 0; i < this.setting.Data.length; i++) { accitem = this.initAccordinItem(this.setting.Data[i]); acc.append(accitem); } return acc.accordion({ collapsible: false, animateChildren: false, onOpening: function () { self.ExcuteEvent("Opening", self, { dom: this, item: $(this).data("accordinitemcontent"), }); }, onOpen: function () { self.ExcuteEvent("Open", self, { dom: this, item: $(this).data("accordinitemcontent"), }); }, onClosing: function () { self.ExcuteEvent("Closing", self, { dom: this, item: $(this).data("accordinitemcontent"), }); }, onClose: function () { self.ExcuteEvent("Close", self, { dom: this, item: $(this).data("accordinitemcontent"), }); }, onChange: function () { self.ExcuteEvent("Change", self, { dom: this, item: $(this).data("accordinitemcontent"), }); } }); } AccordionMenu.prototype.initAccordinItem = function (item) { var li = $("

"); li.addClass("item"); var title = this.initAccordinItenTitle(item); var content = this.initAccordinItemContent(item); li.append(title).append(content); return li; } AccordionMenu.prototype.initAccordinItenTitle = function (item) { var title = $(' ' + item.Name + ' '); title.data("accordinitemtitle", item); return title; } AccordionMenu.prototype.initAccordinItemContent = function (item) { return this.initMenu(item); } AccordionMenu.prototype.linkClick = function (event) { var data = $(this).data("linkdata"); event.data.ExcuteEvent("LinkClick", event.data, { dom: $(this), data: data, parent: $(this).parentsUntil("ul").parent("ul").data("accordinitemcontent") }); } AccordionMenu.prototype.initMenu = function (item) { var menu = $("

"); menu.addClass("vertical menu content"); menu.data("accordinitemcontent", item); if (!item.Data || !item.Data.length) { return menu; } var menuitem; for (var i = 0; i < item.Data.length; i++) { menuitem = this.initMenuItem(item.Data[i]); menu.append(menuitem); } return menu; } AccordionMenu.prototype.initMenuItem = function (item) { var li = $('

' + item.Name + '

'); li.data("itemdata", item); li.children('a').data("linkdata", item); li.children('a').click(this, this.linkClick); return li; } AccordionMenu.prototype = Extend({}, ClassEvent.prototype, AccordionMenu.prototype) return AccordionMenu; }) gistfile2.txt

/// /// /// /// /// /// define(function (require) { var ClassEvent, ScrollNav,Extend, ScrollActionTypeManager, AccordionMenu;//模块实现需要的变量依赖 ClassEvent = require("./classevent"); ScrollNav = require("./app_nav"); Extend = require("./extend"); ScrollActionTypeManager = require("./scrollactiontypemanager"); AccordionMenu = require("./accordionmenu"); var AccordionMenuNavigation = function () { function accordionmenunavigation(setting) { var _self = this; ClassEvent.call(this); this.setting = setting; this.InitAccordionMenu(); } accordionmenunavigation.prototype.InitAccordionMenu = function () { var _self = this; this.AccordionMenu = new AccordionMenu({ Data: this.setting.Data }); this.AccordionMenu.Init(); this.AccordionMenu.RegistEvent("Opening", function () { _self.openEvent.apply(_self, arguments); }, this); this.AccordionMenu.RegistEvent("LinkClick", function () { _self.itemClickEvent.apply(_self, arguments); }, this); $(this.setting.NavContainer).append(this.AccordionMenu.GetAccordionDom()); } accordionmenunavigation.prototype.openEvent = function (accor,event,_self) { event.dom.children().first().find("a").children().click(); } accordionmenunavigation.prototype.itemClickEvent = function (accor,event,_self) { $("#" + this.setting.InfoContainer).children().hide(); event.dom.parentsUntil("ul").parent("ul").find("a").removeClass("active"); event.dom.addClass("active"); var func = ScrollActionTypeManager.GetActionType(event.data.Action || "DataTable"); if (typeof func === "function") { func({ DataManager: this.setting.DataManager, Container: this.setting.InfoContainer,//内容节点 ScrollControl: this,//预留 作用不大 NavItem: event.parent,//nav item SubItem: event.data,//init subitem }) } } //accordionmenunavigation.prototype.scrollNavChange = function (scroll, event, control) { // var blocks = event.item; // $("#" + control.setting.InfoContainer).children().each(function () { // $(this).hide(); // });//.html(""); // $("#" + control.setting.InfoContainer).css("padding-bottom", $("#" + control.setting.InfoContainer).parent().height());//先进行补白操作，防止宽度出现错误 // //if (event.item.DefaultAction) { // if (true) { // //进行默认的处理 有用户自己进行处理 // if (blocks.Data && blocks.Data.length > 0) { // for (var i = 0; i < blocks.Data.length; i++) { // var func = ScrollActionTypeManager.GetActionType(blocks.Data[i].Action || "DataTable"); // if (typeof func === "function") { // func({ // DataManager: control.setting.DataManager, // Container: control.setting.InfoContainer,//内容节点 // ScrollControl: control,//预留 作用不大 // ScrollSpy: scroll,//预留 作用不大 // NavItem: event.item,//nav item // SubItem: blocks.Data[i]//init subitem // }) // } // } // } // } // control.ExcuteEvent("ScrollItemChange", control, event); //} accordionmenunavigation.prototype.Destroy = function () { this.ScrollNav.Destroy(); } accordionmenunavigation.prototype.Refresh = function () { //var containheight = $("#" + this.setting.InfoContainer).parent().height(); //var infoheight = $("#" + this.setting.InfoContainer).children(":visible").last().outerHeight(); ////高度不够进行补白 超出则去掉补白 //if (containheight > infoheight) { // $("#" + this.setting.InfoContainer).css("padding-bottom", containheight - infoheight); //} else { // $("#" + this.setting.InfoContainer).css("padding-bottom", 0); //} //this.ScrollNav.Refresh(); } //从新进行定位操作 accordionmenunavigation.prototype.LocaltionHash = function () { if (!/^\s{0,}$/.test(location.hash)) { var a = this.AccordionMenu.GetAccordionDom().find('a[href="' + location.hash + '"]'); a.parentsUntil("ul").parent("ul").parent("li").children().addClass("active"); a.click(); } } accordionmenunavigation.prototype.Open = function (index) { this.AccordionMenu.OpenItem(index); } Extend(accordionmenunavigation.prototype, ClassEvent.prototype); return accordionmenunavigation; }(); return AccordionMenuNavigation; }); gistfile3.txt

/// /// /// define(function (require) { //var $ = require("jquery"); var ClassEvent = require("./classevent"); var AccordionMenu = require("./accordionmenu"); var Extend = require("./extend"); /** * 滚动监听 */ function ScrollNav(setting) { ClassEvent.call(this); this.accordinMenu = null; this.setting = setting; } ScrollNav.prototype.Init = function () { this.initAccordionMenu(); this.initScroll(); this.initEvent(); return this; } ScrollNav.prototype.initScroll = function () { $(this.setting.Listener).scrollspy({ target: this.setting.navContainer, offset: this.setting.offset }); } ScrollNav.prototype.initAccordionMenu = function () { var self = this; this.accordinMenu = new AccordionMenu({ Data: this.setting.Data }).Init(); this.accordinMenu.GetAccordionDom().addClass("nav"); $(this.setting.NavContainer).append(this.accordinMenu.GetAccordionDom()); } ScrollNav.prototype.initEvent = function () { var self = this; this.accordinMenu.RegistEvent("Opening", function (sender, event, option) { self.ExcuteEvent("ScrollNavOpen", self, { item: event.item }) }, this); this.accordinMenu.RegistEvent("LinkClick", function (sender, event, option) { self.ExcuteEvent("LinkClick", self, event) }, this); $(this.setting.Listener).on('activate.bs.scrollspy', function () { self.ExcuteEvent("Active", self, {}); }) } ScrollNav.prototype.Refresh = function () { $(this.setting.Listener).scrollspy('refresh'); $(this.setting.Listener).scrollspy('process'); } ScrollNav.prototype.RePosition = function () { //根据hash进行重新定位 this.setting.navContainer.find('a[href="' + location.hash + '"]'); } ScrollNav.prototype.Destroy = function () { this.accordinMenu.Destroy(); $(this.setting.Listener).scrollspy("destroy"); } ScrollNav.prototype.OpenItem = function (parm) { this.accordinMenu.OpenItem(); } ScrollNav.prototype.CloseItem = function (parm) { this.accordinMenu.CloseItem(arguments); } ScrollNav.prototype.GetExtendData = function () { return this.accordinMenu.GetExtendData(); } ScrollNav.prototype.GetActiveItemData = function () { return this.accordinMenu.GetExtendContent().children(".active").data("itemdata"); } ScrollNav.prototype = Extend({}, ClassEvent.prototype, ScrollNav.prototype); })