토글되고 애니메이션 된 앵커 링크가 더 이상 탐색하지 않습니다.

Question

jQuery.toggle과 .animate를 페이지의 맨 아래에있는 탐색 메뉴로 사용하고 있습니다. nav은 두 개의 div로 구성되어 있습니다. 하나는 외부 컨테이너이고 다른 하나는 nav 버튼 등이있는 내부 컨테이너입니다.

달성하려는 것은; 당신은 nav을 클릭하고 그것의 위치는 위로 움직이게하고 nav를 닫으려면 다시 그것을 클릭하면 페이지의 맨 아래에 원래의 위치로 되돌아갑니다.

내가 겪고있는 문제는 브라우저 상태 표시 줄에 대상 URL이 표시 되어도 아무런 문제가없는 탐색 버튼을 클릭해도 링크로 연결되지 않는다는 것입니다.

여기 a link

jQuery의 :

$('#navContainer').toggle(function() { 
    $('#navInner').animate({ 
     bottom: '+=350' 
    }, 400, 'swing', function() { 
    }); 
}, function() { 
    $('#navInner').animate({ 
     bottom: '-=350' 
    }, 400, 'swing', function() { 
    }); 
}); 

CSS :

#navContainer { 
    background-color:#0FF; 
    height:520px; 
    margin:0px 0px 0px 60px; 
    position:fixed; 
    cursor:pointer; 
    bottom: 0px; 
} 

#navInner { 
    background:url(../images/appinstructions/nav2.png); 
    background-repeat:no-repeat; 
    width:638px; 
    height:491px; 
    position:absolute; 
    bottom:-350px; 
} 

HTML :

<div id="navContainer"> 
    <div id="navInner"> 
     <a id="navhomeBtn" href="appInstuc.html"></a> 
     <a id="navhelpBtn" href="appInstuc.html"></a> 
     <a id="geBtn" href="http://www.ge.com/" target="_blank"></a> 
     <div id="pages"> 
      <a href="ipadApp1.html"><img src="images/appinstructions/page1.png" alt="page 1" class="page"/></a> 
      <a href="app1-1.html"><img src="images/appinstructions/page2.png" alt="page 2" class="page"/></a> 
      <a href="appRoots.html"><img src="images/appinstructions/page3.png" alt="page3"class="page"/></a> 
     </div><!--close pages--> 
    </div><!--close navInner--> 
</div><!--close navContainer--> 

Answer 1

문제는와 것 같다기능을 사용하면 .click 링크가 작동합니다. .toggle을 사용하여 링크가 작동하지 않는 이유는 링크가 #navInner div의 자식이기 때문에 링크를 클릭하면 .toggle 이벤트가 발생하기 때문입니다.

var showing = false; 
$('#navInner').click(function(e){ 

    if(e.target != this) return; 

    // Work out which direction we're moving in 
    var topValue = ""; 
    if(showing){ 
     topValue = "+=350"; 
    } else { 
     topValue = "-=350"; 
    } 

    // Change the showing variable to opposite 
    showing = !(showing); 

    // Begin the animation 
    $(this).animate({ 
     top: topValue 
    }, 400, 'swing', function(){ 
     // Do nothing 
    }); 

}); 

이 당신에게 토글 방식의 효과를 줄 것이다,하지만 당신은 자식 요소 중 하나를 클릭하면 그것은 #navInner div 애니메이션되지 않습니다

나는이 대신 같은 일을 제안 할 것이다.

당신이 여전히 #navInner div를 애니메이션을 적용 할 경우, 바로 다음 줄을 제거 : 그들이 링크하고 다른 페이지로 떨어져 당신을 가지고 있기 때문에, 내가 애니메이션을 의심하지만

if(e.target != this) return; 

합니다 (#navInner div이 필요입니다)