jQuery：在1个表格单元格内切换2个div高度

Question

示例图

所以我在一个表格单元格内有2个div。 上方是1格，下方是1格。 底部的那个是不可见的，因此顶部的div占据了表格单元格的整个高度。 单击按钮后，底部div变为可见，顶部div降低其高度，为底部div腾出空间。 因此，这将在再次单击按钮时切换，底部div隐藏，顶部div占据单元格高度。

这是我所拥有的，但是失败了：

 $('#button').click(function(){

   $('#bottomdiv').toggle(function(){
      $("#topdiv").animate({height:250},200);
   },function(){
      $("#topdiv").animate({height:400},200);
   });

});

感谢您的帮助，jsfiddle演示非常感谢！

Answer 1

您接近了-我想您只需要将“点击”处理程序更改为“切换”即可。 例如： （JS Fiddle）

jQuery(document).ready(function($) {
     $('#button').toggle(function () {
         // Show bottom
         $("#topdiv").animate({
             height: 400
         }, 200);
         $("#bottomdiv").slideUp();
         //console.log("bottom shown:", $("#bottomdiv"));
     }, function () {
         // Hide bottom
         $("#topdiv").animate({
             height: 250
         }, 200);
         $("#bottomdiv").slideDown();
         //console.log("bottom hidden:", $("#bottomdiv"));
     });
});

Answer 2

$('body').on('click', '#button', function(){
  $('#topdiv').animate({
    height : '250px'
  }, {
     duration : 200,
     complete : function(){
       $('#bottomdiv').animate({
          height: '400px'
       }, 200);
     }
  });
});