单击图像将 div 向上移动，然后再次单击以使用 jQuery 将其移回答案

【问题标题】：Click image to move div up, then click again to move it back using jQuery单击图像将 div 向上移动，然后再次单击以使用 jQuery 将其移回
【发布时间】：2016-10-15 02:44:08
【问题描述】：

我有一个距离顶部 300 像素的 div，以及 div 顶部的向上箭头图像。

我希望用户点击向上箭头图像，使这个 div 向上 300px，然后向上箭头图像变成向下箭头图像，然后当用户点击向下箭头图像时，这个 div 又向下 300px 到这是原来的位置。

我希望用 jQuery 来做这件事。

使用响应，这就是我的标记现在的样子：

$(function() {
    $('.container img').click(function() {
        $('.container').animate({top:-276});
    });
    $('.container img').click(function() {
        $('.container').animate({top:0});
    });
});

.container{
  border:1px solid gray;
  margin-top:300px;
  height:800px;
  padding:50px;
  position:relative;
}
	
.container img{
  position:absolute;
  top:-22px;
  width:25px;
  height:25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

<div class="container">

	<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" />

	<p>some text here</p>
	
</div>
  
</body>

div 只是上下移动，没有停在顶部。

另外，如何在第一次点击时将向上箭头更改为向下箭头？然后在第二次点击时再次返回向上箭头？

【问题讨论】：

标签： html click

【解决方案1】：

我会使用由jQuery.click() 事件触发的jQuery.animate()。

像这样，但有两种状态，从一种状态切换到另一种状态：

$(function() {
    $('#arrow').click(function() {
        $('#thediv').animate({top:300});
    });
});

【讨论】：

【解决方案2】：

$(function()
{
  var expanded = false;
  $('#sidebar').click(function()
                      {
                          if (!expanded)
                          {
                              $(this).animate({'left' : '0px'}, {duration : 400});
                              expanded = true;
                          }
                          else
                          {
                             $(this).animate({'left' : '565px'}, {duration: 400});
                              expanded = false;
                          }
                      });
 });

您可以在下面查看此链接。也许它可以帮助您找到解决方案。链接：-Javascript move div onClick

【讨论】：