javascript - 将相同的功能应用于多个链接。显示/隐藏 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

这是因为有两个带有 class 的元素，.trigger如果切换或不切换，每个元素都会记住自己的状态。

您可以编写单独的函数来单击菜单项和箭头，或者检查是否#teams div hidden触发单击：

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