Question

example diagram

所以我在表格单元格中有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 demo非常感谢！

Answer 1

你关闭了 - 我想你只需要改变你的点击＆＃34;处理程序是＆＃34;切换＆＃34;。例如：(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);
     }
  });
});

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

2 个答案: