2013-10-06 3 views
0

여기 흥미로운 기사가 ​​http://vk.com/away.php?utf=1&to=http%3A%2F%2Ftympanus.net%2FTutorials%2FAnimatedBorderMenus%2Findex3.html 인 것을 발견하고 내 사이트에 적용하려고했습니다. 전에 :JS 코드 변환에 약간의 문제가 있습니다

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(); 

후 :

나는 내가 그런 식으로 코드를 변환하기로 결정 현대화 + JQuery와 대 classie conficting에서 문제가 발견

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

var $menu = $('bt-menu')var $menu = $('#bt-menu')이어야합니다.

+0

감사합니다. 나는 .. 자야 해. –

관련 문제