JS实现左侧菜单工具栏_javascript技巧_

let WenMenuNode = function ({                                 text,                                 wenMenu,                                 attributes = {},                                 subs = [],                                 parentElement = null,                                 iconHTML = '',                                 level = 1,                                 parentNode = null,                                 isActive = false,                                 onLaunch = null,                             }) {     this._level = level;     this._text = text;     this._attributes = attributes;     this._wenMenu = wenMenu;     this._subs = subs;     this._onLaunch = onLaunch;     this._childHeight = 0;     this._height = 0;     this.style = {         childHeight: 0,     }       this._parentElement = parentElement;     this._parentNode = parentNode;     this._element = this._wenMenu.createElement('li', {         class: "wen-menu-li",     });     this._textElement = this._wenMenu.createElement('a', this._attributes);     this._iconHTML = iconHTML;     this._childNodes = [];     this._childElement = null;     this._activeChild = null;     if (this._parentElement) this._parentElement.append(this._element);     this._isActive = isActive;     if (this._isActive) {         if (this._level == 1) {             this._wenMenu._activeMenu = this;         } else if (this._parentNode) {             this._parentNode._activeChild = this;         }     }     this.create().onLaunch(); }     WenMenuNode.prototype.create = function () {     let a = this._textElement;     let icon = this._wenMenu.createElement('i', {         class: "wen-menu-icon",     })     if (this._level > 1) {         a.innerHTML = '--';     }     icon.innerHTML = this._iconHTML;     a.append(icon);     a.innerHTML += `${this._text}`;     if (this._level == 1) {         a.classList.add('wen-menu-first');     }     this._element.append(a);     if (this._subs.length) {         let ul = this._wenMenu.createElement('ul', {             class: "wen-menu-ul" + (this._level == 1 ? " wen-menu-ul-second" : ""),         });         this._element.append(ul);           this._childElement = ul;         this._subs.forEach((item, i) => {             let node = new WenMenuNode({                 text: item.text,                 wenMenu: this._wenMenu,                 attributes: item.attributes,                 subs: item.subs,                 parentElement: ul,                 iconHTML: item.iconHTML,                 level: this._level + 1,                 parentNode: this,                 isActive: this._isActive && i == 0,                 onLaunch: (childNode) => {                     this._childNodes.push(childNode);                     if (i == this._subs.length - 1) {                         this.setEventListener(true);                     }                 }             });         });     } else {         this.setEventListener(false);     }     return this; }     WenMenuNode.prototype.onLaunch = function () {     if (this._onLaunch) {         this._onLaunch.call(this._parentNode, this);     }     return this; }   WenMenuNode.prototype.setEventListener = function (hasSub = false) {     if (hasSub) {         this._height = this._subs.length * this._wenMenu._menuHeight;         this._childHeight = this._childElement.clientHeight;         if (this._isActive) {             this._textElement.setAttribute('wen-active', '');             this._textElement.setAttribute('wen-expand', '');             this.style.childHeight = this._childHeight + this._wenMenu._menuSpacing;         } else {             this._textElement.setAttribute('wen-icon', '')             this._textElement.setAttribute('wen-collapse', '');             this.style.childHeight = 0;         }         this._childElement.style.height = this.style.childHeight + "px";         this._textElement.addEventListener('click', (e) => {             if (this._wenMenu._autoCollapse) {                 this.resetHeight();                 this.setHeight({                     menuNode: this,                 })             } else {                 let height = 0, target = e.target;                 if (target.classList.value.indexOf('wen-menu-text') >= 0) {                     target = target.parentElement;                 }                 if (target.getAttribute('wen-expand') === null) {                     // todo:: 展开                     height = this.style.childHeight = this._height + this._wenMenu._menuSpacing;                     target.setAttribute('wen-expand', '');                     target.removeAttribute('wen-collapse');                 } else {                     // todo:: 收起                     height = -this.style.childHeight;                     this.style.childHeight = 0;                     target.setAttribute('wen-collapse', '');                     target.removeAttribute('wen-expand');                     this.resetHeight(this._childNodes)                 }                 this._childElement.style.height = this.style.childHeight + 'px';                 if (this._parentNode) {                     this.setHeight({                         menuNode: this._parentNode,                         direction: 'up',                         childHeight: height,                         childNode: this,                     })                 }             }         });     } else {         if (this._isActive) {             this._textElement.classList.add('wen-active');         }         this._textElement.addEventListener('click', (e) => {             if (this._wenMenu._autoCollapse) {                 this.resetHeight();                 this.setHeight({                     menuNode: this._parentNode,                     direction: 'up',                     childNode: this,                     childHeight: this._height,                 })             }             this.removeActive(this._wenMenu._activeMenu)             this._isActive = true;             this._textElement.classList.add('wen-active');             let target = e.target;             if (target.classList.value.indexOf('wen-menu-text') >= 0) {                 target = target.parentElement;             }             if (target.classList.value.indexOf('wen-menu-first') >= 0) {                 this._wenMenu._activeMenu = this;             } else if (this._parentNode) {                 this.addActive(this._parentNode, this)             } else {                 this._wenMenu._activeMenu = this;             }             if (this._wenMenu._event) {                 this._wenMenu._event.call(this, e)             }         });     }     return this; }     WenMenuNode.prototype.setHeight = function ({                                                 menuNode = null,                                                 direction = 'down',                                                 childHeight = 0,                                                 childNode = null,                                             }) {     if (!menuNode) {         return 0;     }     menuNode._textElement.setAttribute('wen-expand', '');     menuNode._textElement.removeAttribute('wen-collapse');     if (this._wenMenu._autoCollapse) {         menuNode.style.childHeight = menuNode._height;     }     if (direction == 'down') {         if (menuNode._subs.length) {             menuNode.style.childHeight += (this._wenMenu._menuSpacing * (childNode ? childNode._level : 1));             if (menuNode._isActive) {                 menuNode.style.childHeight += this.setHeight({                     menuNode: menuNode._activeChild,                 });             }             if (menuNode._childElement) {                 menuNode._childElement.style.height = menuNode.style.childHeight + "px";             }             if (menuNode._parentNode) {                 this.setHeight({                     menuNode: menuNode._parentNode,                     direction: 'up',                     childNode: menuNode,                     childHeight: menuNode.style.childHeight,                 });             }         }     } else {         menuNode.style.childHeight += (childHeight + this._wenMenu._menuSpacing);         menuNode._childElement.style.height = menuNode.style.childHeight + "px";         if (menuNode._parentNode) {             this.setHeight({                 menuNode: menuNode._parentNode,                 direction: 'up',                 childHeight: menuNode.style.childHeight,                 childNode: menuNode,             });         }     }     return menuNode.style.childHeight; }   WenMenuNode.prototype.resetHeight = function (menuNodes) {     if (!menuNodes) {         menuNodes = this._wenMenu._menuNodes;     }     menuNodes.forEach((node) => {         if (node._childElement) {             node.style.childHeight = 0;             node._childElement.style.height = '0px';         }         if (node._childNodes.length) {             node._textElement.setAttribute('wen-collapse', '');             node._textElement.removeAttribute('wen-expand');             this.resetHeight(node._childNodes);         }     });     return this; }   WenMenuNode.prototype.addActive = function (menuNode, activeChildNode) {     menuNode._isActive = true     menuNode._textElement.setAttribute('wen-active', '');     menuNode._textElement.removeAttribute('wen-icon');     if (this._wenMenu._autoCollapse) {         menuNode._textElement.setAttribute('wen-expand', '');         menuNode._textElement.removeAttribute('wen-collapse');     }     menuNode._activeChild = activeChildNode;     if (menuNode._parent
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：vue3中通过ref获取元素节点的实现_vue.js_
                                                                
下一篇：关于Vue中的全局导航守卫(beforeEach、afterEach)_vue.js_