2

这似乎是一个非常简单的 jQuery 菜单下拉效果。我了解正在发生的事情的机制；但是，我不明白 MooTools 的语法。任何人都可以帮忙吗？JSFiddle 链接：http: //jsfiddle.net/S2ku7/4/

jQuery版本

var ww = document.body.clientWidth;

$(document).ready(function() {
    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })

    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
    adjustMenu();
})

$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustMenu();
});

var adjustMenu = function() {
    if (ww < 768) {
        $(".toggleMenu").css("display", "inline-block");
        if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            $(this).parent("li").toggleClass("hover");
        });
    } 
    else if (ww >= 768) {
        $(".toggleMenu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
             // must be attached to li so that mouseleave is not triggered when hover over submenu
             $(this).toggleClass('hover');
        });
    }
}

我在 MooTools 中的最佳尝试

var ww = window.getSize();

window.addEvent('domready', function() {
    $$('ul.nav li a').each(function(link) {
        if(link.getSiblings().length > 0) {
            link.addClass('parent');
        }
    })

    $('a.toggleMenu').addEvent('click', function(elem) {
            elem.stop();
            $('.toggleMenu').toggleClass('active');
            $('.nav').toggle();
    });
    adjustMenu();
});

window.addEvent('resize', function() {  
    ww = window.getSize();
    adjustMenu();
});

var adjustMenu = function() {
    if (ww.x < 716) {
        $('a.toggleMenu').setStyle('display', 'inline-block');

        if (!$('a.toggleMenu').hasClass('active')) {
            $('ul.nav').setStyle('display', 'none');
        } else {
            $('ul.nav').setStyle('display', 'block');
        }

        $$('ul.nav li').each( function(elem) {      
            elem.removeEvent('mouseenter');
            elem.removeEvent('mouseleave');     
        });

        $$('ul.nav li a.parent').each( function(elem) {
            elem.removeEvent('click');      
            elem.addEvent('click', function(e){
                e.stop();
                elem.getParent('li').toggleClass('hover');
            });
        });
    } 
    else if(ww.x >= 716) {
        $('a.toggleMenu').setStyle('display', 'none');
        $('ul.nav').setStyle('display', 'block');

        $$('ul.nav li').each(function(elem) {
            elem.removeClass("hover");
        });

        $$('ul.nav li a').each(function(elem){      
            elem.removeEvent('click');
        });

        $$('ul.nav li').each( function(elem ){
            elem.removeEvent('mouseenter');
            elem.removeEvent('mouseleave');

            elem.addEvents({
                'mouseenter' : function(){ 
                    elem.toggleClass('hover');
                },
                'mouseleave' : function(){  
                    elem.toggleClass('hover');          
                }
            }); 
        });     
    }   
}
4

2 回答 2

1

这里会更像 mootools：通过一些优化，如果您针对单个元素，给它一个 id 并使用 $() 函数（我在 jsfiddle 中做到了，链接也确实类似于 mootools。玩得开心在 mootools 世界！

jsfiddle：http: //jsfiddle.net/S2ku7/14/

var adjustMenu = function () {
var 
    ww = window.getSize(),
    menu = $('toggle-menu'),
    nav = $('nav');
if (ww.x < 768) {
    menu
        .setStyle('display', 'inline-block');

    nav
        .setStyle('display', menu.hasClass('active') ? 'block' : 'none')
        .getElements("li")
        .each(function (li) {
        li.removeEvents('mouseenter')
            .removeEvents('mouseleave')
            .getElements("a.parent").each(function (a) {
            a.removeEvents('click')
                .addEvent('click', function (e) {
                e.stop();
                li.toggleClass('hover');
            });
        });
    });
} else if (ww.x >= 768) {
    menu.setStyle('display', 'none');

    nav
        .setStyle('display', 'block')
        .getElements('li').each(function (li) {
        li.removeClass("hover")
            .removeEvents('mouseenter')
            .removeEvents('mouseleave')
            .addEvents({
                'mouseenter': function () {
                    li.toggleClass('hover');
                },
                'mouseleave': function () {
                    li.toggleClass('hover');
                }
            })
            .getElements("a").each(function (a) {
                a.removeEvents('click');
            });
    });
}
};

window.addEvents({
'domready': function () {

    $$('ul.nav li a').each(function (a) {
        if (a.getSiblings()) {
            a.addClass('parent');
        }
    });

    $('toggle-menu').addEvent('click', function (e) {
        e.stop();
        $('toggle-menu').toggleClass('active');
        $('nav').toggle();
    });
    adjustMenu();
},
'resize': function () {
    adjustMenu();
}
});
于 2013-03-21T23:25:30.370 回答
0

这是最终的 JSFiddle 链接：http: //jsfiddle.net/S2ku7/13/

最终代码

var ww = window.getSize();

var adjustMenu = function() {
    if (ww.x < 768) {
        $$('a.toggleMenu').setStyle('display', 'inline-block');

        if (!$$('a.toggleMenu').hasClass('active')) {
            $$('ul.nav').setStyle('display', 'none');
        } else {
            $$('ul.nav').setStyle('display', 'block');
        }

        $$('ul.nav li').each( function(elem) {      
            elem.removeEvents('mouseenter');
            elem.removeEvents('mouseleave');        
        });

        $$('ul.nav li a.parent').each(function(elem) {
            elem.removeEvents('click');     
            elem.addEvent('click', function(e){
                e.stop();
                elem.getParent('li').toggleClass('hover');
            });
        });
    } 
    else if(ww.x >= 768) {
        $$('a.toggleMenu').setStyle('display', 'none');
        $$('ul.nav').setStyle('display', 'block');

        $$('ul.nav li').each(function(elem) {
            elem.removeClass("hover");
        });

        $$('ul.nav li a').each(function(elem){      
            elem.removeEvents('click');
        });

        $$('ul.nav li').each( function(elem ){
            elem.removeEvents('mouseenter');
            elem.removeEvents('mouseleave');

            elem.addEvents({
                'mouseenter' : function(){
                    elem.toggleClass('hover');
                },
                'mouseleave' : function(){  
                    elem.toggleClass('hover');          
                }
            }); 
        });     
    }   
}

window.addEvent('domready', function() {
    $$('ul.nav li a').each(function(link) {
        if(link.getSiblings().length > 0) {
            link.addClass('parent');
        }
    })

    $$('a.toggleMenu').addEvent('click', function(elem) {
            elem.stop();
            $$('a.toggleMenu').toggleClass('active');
            $$('ul.nav').toggle();
    });
    adjustMenu();
});

window.addEvent('resize', function() {  
    ww = window.getSize();
    adjustMenu();
});

原件问题

  • 选择课程时使用 '$$' 而不是 '$'
  • 需要为 toggle() 函数调用启用 MooTools-More

感谢@n3on 在#mootools IRC 聊天中的所有帮助！

于 2013-03-18T02:12:34.797 回答