Question

我在http://vk.com/away.php?utf=1&to=http%3A%2F%2Ftympanus.net%2FTutorials%2FAnimatedBorderMenus%2Findex3.html找到了有趣的文章，并尝试将其应用到我的网站上。

我发现在使现代化+ classie与jquery混淆时存在问题所以我决定转换代码：之前：

function init() {
    var menu = document.getElementById( 'bt-menu' ),
        trigger = menu.querySelector( 'a.bt-menu-trigger' ),
        // triggerPlay only for demo 6
        triggerPlay = document.querySelector( 'a.bt-menu-trigger-out' ),
        // event type (if mobile use touch events)
        eventtype = mobilecheck() ? 'touchstart' : 'click',
        resetMenu = function() {
            classie.remove( menu, 'bt-menu-open' );
            classie.add( menu, 'bt-menu-close' );
        },
        closeClickFn = function( ev ) {
            resetMenu();
            overlay.removeEventListener( eventtype, closeClickFn );
        };

    var overlay = document.createElement('div');
    overlay.className = 'bt-overlay';
    menu.appendChild( overlay );

    trigger.addEventListener( eventtype, function( ev ) {
        ev.stopPropagation();
        ev.preventDefault();

        if( classie.has( menu, 'bt-menu-open' ) ) {
            resetMenu();
        }
        else {
            classie.remove( menu, 'bt-menu-close' );
            classie.add( menu, 'bt-menu-open' );
            overlay.addEventListener( eventtype, closeClickFn );
        }
    });

    if( triggerPlay ) {
        triggerPlay.addEventListener( eventtype, function( ev ) {
            ev.stopPropagation();
            ev.preventDefault();

            classie.remove( menu, 'bt-menu-close' );
            classie.add( menu, 'bt-menu-open' );
            overlay.addEventListener( eventtype, closeClickFn );
        });
    }

}

init();

后：

function init() {
    var $menu = $( 'bt-menu' ),         
        eventtype = mobilecheck() ? 'touchstart' : 'click',
        resetMenu = function() {
            $menu.removeClass('bt-menu-open' );
            $menu.addClass('bt-menu-close' );
        },
        closeClickFn = function( ev ) {
            resetMenu();
            $overlay.unbind( eventtype, closeClickFn );
        };

    var $overlay = $("<div class='bt-overlay'/>");
        $menu.append( $overlay );

    $('bt-menu a.bt-menu-trigger').bind( eventtype, function( ev ) {
        alert('hi');
        ev.stopPropagation();
        ev.preventDefault();

        if( $menu.hasClass('bt-menu-open' ) ) {
            resetMenu();
        }
        else {
            $menu.removeClass('bt-menu-close' );
            $menu.addClass('bt-menu-open' );
            $overlay.bind( eventtype, closeClickFn );
        }
    });
}

init();

但它不起作用，我不知道我的错误在哪里。有人可以帮忙吗？

Answer 1

var $menu = $( 'bt-menu' )应为var $menu = $( '#bt-menu' )。

转换JS代码有一些问题

1 个答案: