javascript - 第二次点击，元素被移动到屏幕边缘

Question

我有一个 div，在我单击一个元素 (button1) 后，它会扩展它的高度。然后我会出现另一个按钮，它允许您缩小 div(button2)。单击 button1 后，div 展开并且 button2 显示在底部。然后我可以单击 button2 将 div 缩小到正常状态，但如果我再次展开 div，button2 现在不在屏幕边缘，尽管在相同的底部位置，只是最左边而不是居中。

我必须将 button2 的边距设置为 -25px，因为绝对定位会使其偏离中心。而且我需要使用绝对定位，因为它似乎是让按钮在展开后出现在 div 底部的唯一方法。

$(".button1").on("click", function(){

  $(".button1" ).fadeOut(200);	

  $("#block3").animate({ 
    height: '800px' 
  }, 600, function() {

    $(".button2").fadeIn(200);

  });

});



$(".button2").on("click", function(){

  $(".button2").fadeOut(200);		
  $("#block3").animate({ 
    height: '400px' 
  }, 600,function(){
    $(".button1" ).fadeIn(200);

  });

});

.button2{
  width: 50px;
  height: 50px;
  display:none; 
  position: absolute;
  margin-left: 25px;
}

.button1{

width: 50px;
height: 50px;
margin-top: 25px;
image-rendering: auto;

}

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

<div class="row">
  <div class = "col-md-12" id = "block3">
      <img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll.png"  class = "button1" />
      <img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll1.png"  class = "button2" />
  </div>
</div>

上传代码。

https://jsfiddle.net/bs9xhe5e/2/

Answer 1

在第二次单击时，它将内联样式更改为显示: block 而不是显示:内联，如果您只是将显示:内联添加到您的 jQuery 中，它就可以工作；

https://jsfiddle.net/havL1z3m/

已添加

$(".button2").css({display:"inline"});