jquery - Jquery：在 1 个表格单元格内切换 2 个 div 高度

Question

示例图

所以我在一个表格单元格中有 2 个 div。1个div在上面，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 小提琴）

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