Question

我一直在使用这个Codrops多级响应式菜单。

http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/

当您深入该菜单时，它会在菜单顶部创建后一级别的链接。我想要创建的是直接返回第一级别，如果你进入第3级或更深层次。另外，我想保持后退只能向后退一步。

我创建了一个Codepen，您还可以看到菜单正常工作。

Code

Answer 1

这是一种实现目标的方法。

创建VAR：

_config : function() {
    this.open = false;
    this.$trigger = this.$el.children( '.dl-trigger' );
    this.$menu = this.$el.children( 'ul.dl-menu' );
    this.$menuitems = this.$menu.find( 'li:not(.dl-back)' );
    this.$el.find( 'ul.dl-submenu' ).prepend( '<li class="dl-back"><a href="#">back</a></li>' );
    this.$back = this.$menu.find( 'li.dl-back' );

    //ADDED
    this.$el.find('ul.dl-submenu ul.dl-submenu').prepend('<li class="dl-back-top"><a href="#">Back to first level</a></li>');
    this.$backTop = this.$menu.find('li.dl-back-top');
},

为没有第一级子菜单
并创建$ backTop变量以供以后使用

this.$backTop.on('click.dlmenu', function(event) {

   var $this = $( this ),
        $submenu = $this.parents( 'ul.dl-submenu:first' ),
        $item = $submenu.parent(),

        $flyin = $submenu.clone().insertAfter( self.$menu );

    //ADDED
    self._resetMenu();

    var onAnimationEndFn = function() {

        self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classin );
        $flyin.remove();

    };

    setTimeout( function() {
        $flyin.addClass( self.options.animationClasses.classout );
        self.$menu.addClass( self.options.animationClasses.classin );
        if( self.supportAnimations ) {
            self.$menu.on( self.animEndEventName, onAnimationEndFn );
        }
        else {
            onAnimationEndFn.call();
        }

        $item.removeClass( 'dl-subviewopen' );

        var $subview = $this.parents( '.dl-subview:first' );
        if( $subview.is( 'li' ) ) {
            $subview.addClass( 'dl-subviewopen' );
        }
        $subview.removeClass( 'dl-subview' );
    } );

    return false;

});

从以前创建的按钮（$ backTop）的$ back按钮重复点击事件，并添加self._resetMenu();以点击“返回第一个”重置菜单

最后只需要为新按钮创建类：

.dl-menuwrapper li.dl-back-top > a {
  padding-left: 35px;
  background: rgba(0, 0, 0, 0.1);
}
.dl-menuwrapper li.dl-back-top:after{
  position: absolute;
  top: 0;
  line-height: 50px;
  speak: none;
  -webkit-font-smoothing: antialiased;
  content: "<<";
  font-family: "arial";
  color: #fff;
  font-weight: 900;
}

Updated CODEPEN

在多级菜单上从第3级链接到第1级

1 个答案: