對多個鏈接應用相同的功能。顯示/隱藏div

Question

當下面的鏈接是點擊時，我需要在用戶點擊各種按鈕時發生。看到試驗場這裏：http://tryoutyourwebsite.com/sand

$(document).ready(function() { 

    $('#teams').animate({ 
     marginTop: '-495px' 
    }, 200); 

    $('.trigger').toggle(function(){ 

      $('#teams').animate({ 
       marginTop: '0' 
      }, 500); 

     }, 
     function(){ 
      $('#teams').animate({ 
       marginTop: '-495px' 
      }, 500); 
    }); 
}); 


<div id="close-teams" class="trigger"><a href="#"><img src="images/up-arrow.png"></a></div>  
<li><div id="open" class="trigger"><a href="#">Teams</a></div></li> 
<div id="turtle" class="trigger"><a href="#teams">vote for a team</a></div> 

Answer 1

這是因爲有與.trigger類兩個元素，每一個回憶了自己的狀態，如果它的切換與否。

你可以寫不同的功能單擊菜單項，並在觸發點擊箭頭或檢查#teams div hidden與否：

$('.trigger').click(function() { 
    if($('#teams').css('marginTop') == "0px") { 
     $('#teams').animate({ 
      marginTop: '-495px' 
     }, 500);    
    } else { 
     $('#teams').animate({ 
      marginTop: '0px' 
     }, 500); 
    } 
});