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从#更改为.。

mootools menu document.id to document.getElements

1 个答案:

Fiddle