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

将相同的功能应用于多个链接。显示/隐藏div

1 个答案: