我有一个小的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));
    }
});

最佳答案

MooDropMenu类可用于多个下拉列表。
只需将元素ID更改为类<ul class="nav">,然后使用:

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


注意:请记住也将CSS从#更改为.

Fiddle

10-05 20:53
查看更多