0

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

我在 conicting modernize + classie vs 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();

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

4

1 回答 1

4

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

于 2013-10-06T17:23:27.607 回答