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; 
}​ 

的JavaScript：

$(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（）來代替。點擊（）

例子：

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

這考慮到DOM的帳戶更新操作，測試和工作

Answer 2

您應該可以致電$.slideToggle()來處理此問題並縮小您的代碼。

下面是手動輸入鏈接：http://api.jquery.com/slideToggle/

這將動畫，並設置display:none的anitmation完成時。

Answer 3

您應該委託您的活動，像

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

DEMO