在转换JS代码时存在一些问题

Question

我在这里发现了有趣的文章http://vk.com/away.php?utf=1&to=http%3A%2F%2Ftympanus.net%2FTutorials%2FAnimatedBorderMenus%2Findex3.html并试图将其应用于我的网站。

我发现问题conficting现代化+ 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(); 

但它不工作，我不不知道我的错误在哪里。 任何人都可以帮忙吗？

Answer 1

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