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 を有効にする必要があります

#mootools IRC チャットで @n3on の助けをありがとう!

于 2013-03-18T02:12:34.797 に答える