javascript - mootools 菜单 document.id 到 document.getElements

Question

我有一个小的 mootools 下拉菜单脚本。它适用于单个 div。 我如何按类(而不是按 id)为 wowk 修复此类并为多个菜单传递多个 div？

HTML(单一菜单):

<ul id="nav">
   <li>
     <a href="#">Link1</a>
     <ul>
        <li>
          <a href="#">Sub Link1</a>
        </li>
     </ul>
   </li>
   <li>
     <a href="#">Link2</a>
   </li>
</ul>

调用菜单类:

document.id('nav').MooDropMenu({
   onOpen: function(el){
      el.fade('in');
      el.getParent('li').addClass('dropdown');
   },
   onClose: function(el){
      el.fade('out');
      el.getParent('li').removeClass('dropdown');
   },
   onInitialize: function(el){
      el.fade('hide').set('tween', {duration:0});
   }
});

这是针对单个文档 ID 的。如何使用 .getElements() 转换多个 div 的源。

MooDropMenu 类:

var MooDropMenu = new Class({

    Implements: [Options, Events],

    options: {
        onOpen:         function(el){el.removeClass('close').addClass('open')},
        onClose:        function(el){el.removeClass('open').addClass('close')},
        onInitialize:   function(el){el.removeClass('open').addClass('close')},
        mouseoutDelay: 100,
        mouseoverDelay: 0,
        listSelector: 'ul',
        itemSelector: 'li',
        openEvent: 'mouseenter',
        closeEvent: 'mouseleave'
    },

    initialize: function(menu, options, level){
        this.setOptions(options);
        options = this.options;

        var menu = this.menu = document.id(menu);

        var that = this;

        menu.getElements(options.itemSelector + ' > ' + options.listSelector).each(function(el){

            this.fireEvent('initialize', el);

            var parent = el.getParent(options.itemSelector),
                timer;

            parent.addEvent(options.openEvent, function(){
                parent.store('DropDownOpen', true);

                clearTimeout(timer);
                if (options.mouseoverDelay) timer = this.fireEvent.delay(options.mouseoverDelay, this, ['open', el]);
                else this.fireEvent('open', el);

            }.bind(this)).addEvent(options.closeEvent, function(){
                parent.store('DropDownOpen', false);

                clearTimeout(timer);
                timer = (function(){
                    if (!parent.retrieve('DropDownOpen')) this.fireEvent('close', el);
                }).delay(options.mouseoutDelay, this);

            }.bind(this));

        }, this);
    },

    toElement: function(){
        return this.menu
    }

});

/* So you can do like this $('nav').MooDropMenu(); or even $('nav').MooDropMenu().setStyle('border',1); */
Element.implement({
    MooDropMenu: function(options){
        return this.store('MooDropMenu', new MooDropMenu(this, options));
    }
}); 

Answer 1

MooDropMenu类适用于多个下拉菜单。 只需将元素 ID 更改为类，<ul class="nav"> ，并使用:

document.getElements('.nav').MooDropMenu({

注意:记得更改 # 中的 CSS至 .还有。

Fiddle