그 한 번 클릭 내 토글 기능은 두 번째 클릭에 작동한다, 나는 scrollTo 함수를 사용하여 일부 모바일 내비게이션이 scrollTo 이벤트

Question

후 두 번째 클릭에서 작동합니다. 그것은 scrollTo 클릭의 바인딩을 할 수 있습니다,하지만 그것을 해결하는 방법을 알아낼 수 없습니다.

HTML :

<div class="nav-bar"> 
    <ul class="nav"> 
     <li><a href="#section1">Section 1</a></li> 
     <li><a href="#section2">Section 2</a></li> 
     <li><a href="#section3">Section 3</a></li> 
    </ul> 
    <a class="nav-toggle">Menu</a> 
</div> 
<div class="section-wrap"> 
    <div id="section1" class="section">Section 1</div> 
    <div id="section2" class="section">Section 2</div> 
    <div id="section3" class="section">Section 3</div> 
</div> 

JS :

$('ul.nav a').bind('click',function(event){ 
    $('ul.nav a').removeClass('on'); 
    $(this).addClass('on'); 
    var $anchor = $(this); 
    $('html, body').stop().animate({ 
     scrollTop: $($anchor.attr('href')).offset().top - 30 
    }, 200, function() { 
     $('.nav-bar').removeClass('open'); 
    }); 
    event.preventDefault(); 
}); 

$('a.nav-toggle').toggle(function() { 
    $('.nav-bar').addClass('open'); 
}, function() { 
    $('.nav-bar').removeClass('open'); 
}); 

문제의 작동 예를 들어이 참조 : 애니메이션의 끝에서 http://jsfiddle.net/MhSKC/9/

Answer 1

, 당신은 open 클래스를 제거합니다. 그 다음에 실행해야 두 toggle 기능의 하나이기 때문에 그 다음 메뉴 바의 다음 클릭에서 toggle 기능은 다시 open 클래스를 제거하려고합니다.

http://jsfiddle.net/P4mtC/

$('a.nav-toggle').click(function() { 
    $('.nav-bar').toggleClass('open'); 
}); 

Answer 2

대신했다

$('a.nav-toggle').toggle(function() { 
    $('.nav-bar').addClass('open'); 
}, function() { 
    $('.nav-bar').removeClass('open'); 
}); 

사용

$('a.nav-toggle').click(function() { 
    $('.nav-bar').toggleClass('open'); 
});