CSS + jQuery 토글 메뉴

Question

jQuery + CSS3을 사용하여 메뉴 작업을하고 있습니다.

나는 메뉴의 오른쪽에 위쪽 화살표가 있으며 클릭하면 메뉴가 위로 움직이고 이미지가 아래쪽 화살표로 바뀝니다.

유일하게 문제가되는 것은 아래쪽 화살표를 클릭하면 작동하기 위해 다소 합법적 인 코드 조각을 제공했지만 다시 아래로 슬라이드하지 않는 것입니다.

저는 jquery를 처음 사용하므로 어떤 도움을 주셔서 감사합니다!

HTML :

<nav id="tfc-new-nav"> 
    <div class="wrapper"> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="contact.html">Contact</a></li> 
      <li><a href="cart.html">Shopping Cart</a></li> 
      <li><a href="login.html">My Account</a></li> 
     </ul> 
    </div> 
    <div class="hide-menu menu-active"></div> 
</nav>​ 

CSS :

.wrapper { 
    display: block; 
    height: 100%; 
    width: 1000px; 
    position: relative; 
    margin: 0 auto; 
} 

#tfc-new-nav { 
    display: block; 
    height: 45px; 
    width: 100%; 
    background: #808E91; 
    position: relative; 
    top: 50px; 
} 

#tfc-new-nav ul { 
    list-style: none; 
} 

#tfc-new-nav ul li { 
    display: block; 
    height: 45px; 
    width: 10%; 
    float: left; 
    text-align: center; 
    line-height: 45px; 
} 

#tfc-new-nav ul li a { 
    display: block; 
    color: #fff; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-family: 'Felix Titling', serif; 
    cursor: pointer; 
    -webkit-transition: background .3s ease-in; 
    -moz-transition: background .3s ease-in; 
    -ms-transition: background .3s ease-in; 
    -o-transition: background .3s ease-in; 
    transition: background .3s ease-in; 
} 

#tfc-new-nav ul li a:hover { 
    background: #50798D; 
} 

#tfc-new-nav .hide-menu { 
    position: absolute; 
    top: 20px; 
    right: 10px; 
    cursor: pointer; 
} 

#tfc-new-nav .hide-menu.menu-active { 
    display: block; 
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/6/61/Black_Up_Arrow.png'); 
    background-size: 100% 100%; 
    height: 7px; 
    width: 7px; 
} 

#tfc-new-nav .hide-menu.menu-hidden { 
    display: block; 
    background-image: url('http://www.wpclipart.com/signs_symbol/BW/direction_arrows/down_arrow.png'); 
    background-size: 100% 100%; 
    height: 7px; 
    width: 7px; 
}​ 

자바 스크립트 :

$(document).ready(function() { 

    $("#tfc-new-nav .hide-menu.menu-active").click(function() { 

     $("#tfc-new-nav").animate({ 

      top: "30px" 

     }); 

     $(this).removeClass("menu-active"); 
     $(this).addClass("menu-hidden"); 

     $(this).animate({ 
      top: "35px" 
     }); 

    }); 

    $("#tfc-new-nav .hide-menu.menu-hidden").click(function() { 

     $("#tfc-new-nav").animate({ 

      top: "95px" 

     }); 

     $(this).removeClass("menu-hidden"); 
     $(this).addClass("menu-active"); 

     $(this).animate({ 
      top: "20px" 
     }); 

    }); 

});​ 

LIVE DEMO

Answer 1

사용 .live()() 대신

예를 .click 같은

$("#tfc-new-nav").on("click", ".menu-hidden", function() { 
    ... 
}); 

DEMO

Answer 2

이 문제를 처리하고 코드를 축소하려면 $.slideToggle()으로 전화 할 수 있어야합니다. http://api.jquery.com/slideToggle/

이 애니메이션과 anitmation이 완료되면 display:none 설정합니다 : 여기

는 수동 항목에 대한 링크입니다. , 이것은 DOM의 계정 갱신 조작에 소요

$("#tfc-new-nav .hide-menu.menu-hidden").live("click", function() { 
    // Do stuff here 
} 

, 테스트 및

Answer 3

을했다 당신은 당신의 사건을 위임해야합니다