Question

我想做的是将侧边栏主类别插入顶部栏，然后在侧边栏打开子菜单，但是我遇到了大部分问题，但我无法解决。

所以我现在在哪里吸吮

修改的部分效果很好

MLMenu.prototype._initEvents = function() {
        var self = this;
        console.log(self);
        for(var i = 0, len = this.menusArr.length; i < len; ++i) {
            this.menusArr[i].menuItems.forEach(function(item, pos) {
                item.querySelector('a').addEventListener('click', function(ev) {
                    var submenu = ev.target.getAttribute('data-submenu'),
                        itemName = ev.target.innerHTML,
                        // subMenuEl = self.el.querySelector('ul[data-menu="' + submenu + '"]');
                        subMenuEl = document.getElementById('sidebar').querySelector('ul[data-menu="' + submenu + '"]');
                        // console.log(subMenuEl)
                        // console.log(self.el);
                        // console.log(itemName);
                        // console.log(document.getElementById('sidebar'));
                    // check if there's a sub menu for this item
                    if( submenu && subMenuEl ) {
                        ev.preventDefault();
                        // open it
                        self._openSubMenu(subMenuEl, pos, itemName);
                    }
                    else {
                        // add class current
                        var currentlink = self.el.querySelector('.menu__link--current');
                        if( currentlink ) {
                            classie.remove(self.el.querySelector('.menu__link--current'), 'menu__link--current');
                        }
                        classie.add(ev.target, 'menu__link--current');

                        // callback
                        self.options.onItemClick(ev, itemName);
                    }
                });
            });
        }

        // back navigation
        if( this.options.backCtrl ) {
            this.backCtrl.addEventListener('click', function() {
                self._back();
            });
        }
};

Main.js（触发错误）

main.js：288未捕获的TypeError：无法读取的属性'menuEl' 未定义

下面是它触发的代码

MLMenu.prototype._menuIn = function(nextMenuEl, clickPosition) {
    var self = this,
        // the current menu
        currentMenu = this.menusArr[this.current_menu].menuEl,
        isBackNavigation = typeof clickPosition == 'undefined' ? true : false,
        // index of the nextMenuEl
        nextMenuIdx = this.menus.indexOf(nextMenuEl),

        nextMenu = this.menusArr[nextMenuIdx],
        nextMenuEl = nextMenu.menuEl,
        nextMenuItems = nextMenu.menuItems,
        nextMenuItemsTotal = nextMenuItems.length;

        // console.log(nextMenuIdx);
        // console.log(currentMenu);
        console.log(nextMenuEl);
        // console.log('nm ' + nextMenu);
        // console.log(nextMenuEl);
        // console.log(self);


    // slide in next menu items - first, set the delays for the items
    nextMenuItems.forEach(function(item, pos) {
        item.style.WebkitAnimationDelay = item.style.animationDelay = isBackNavigation ? parseInt(pos * self.options.itemsDelayInterval) + 'ms' : parseInt(Math.abs(clickPosition - pos) * self.options.itemsDelayInterval) + 'ms';

        // we need to reset the classes once the last item animates in
        // the "last item" is the farthest from the clicked item
        // let's calculate the index of the farthest item
        var farthestIdx = clickPosition <= nextMenuItemsTotal/2 || isBackNavigation ? nextMenuItemsTotal - 1 : 0;

        if( pos === farthestIdx ) {
            onEndAnimation(item, function() {
                // reset classes
                if( self.options.direction === 'r2l' ) {
                    classie.remove(currentMenu, !isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight');
                    classie.remove(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
                }
                else {
                    classie.remove(currentMenu, isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight');
                    classie.remove(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
                }
                classie.remove(currentMenu, 'menu__level--current');
                classie.add(nextMenuEl, 'menu__level--current');

                //reset current
                self.current_menu = nextMenuIdx;

                // control back button and breadcrumbs navigation elements
                if( !isBackNavigation ) {
                    // show back button
                    if( self.options.backCtrl ) {
                        classie.remove(self.backCtrl, 'menu__back--hidden');
                    }

                    // add breadcrumb
                    self._addBreadcrumb(nextMenuIdx);
                }
                else if( self.current_menu === 0 && self.options.backCtrl ) {
                    // hide back button
                    classie.add(self.backCtrl, 'menu__back--hidden');
                }

                // we can navigate again..
                self.isAnimating = false;

                // focus retention
                nextMenuEl.focus();
            });
        }
    });

    // animation class
    if( this.options.direction === 'r2l' ) {
        classie.add(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
    }
    else {
        classie.add(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
    }
};

链接

main.js https://pastebin.com/sKzeqAnD  (modifed)

 classic.js https://pastebin.com/PERqmCSb (not modifed)

modernizr https://pastebin.com/ZUNZbgK0 ( not modifed)

和jsfiddle

Codrops多级菜单-将Codrops多级菜单转换为顶栏

0 个答案: