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

【问题标题】：Jquery: toggling 2 div heights inside 1 table cellJquery：在 1 个表格单元格内切换 2 个 div 高度
【发布时间】：2012-09-09 16:14:36
【问题描述】：

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 演示！

【问题讨论】：

您也应该发布您的 html / css。也许你可以开始自己的小提琴，我们可以帮助纠正它。
好主意，我认为我的图表就足够了，但我会开始为其他人参考。
如果以下答案之一解决了您的问题，请将其标记为您的答案。否则，请让我们知道您还想看到什么或为什么您不能接受这些答案。

标签： jquery html jquery-animate height toggle

【解决方案1】：

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

【讨论】：

【解决方案2】：

您已经接近了——我认为您只需将“点击”处理程序更改为“切换”即可。例如：(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"));
     });
});

【讨论】：

JanHocevar 使用了 .on() 方法，我也推荐它，因为它现在是首选方法，但我不确定您使用的是哪个版本的 jQuery。 api.jquery.com/on
我还建议考虑使用 .toggleClass() 方法并使用 CSS 设置动画内容。这不仅改善了逻辑/UI 分离，而且还防止了初始状态与您预期不符的故障（例如，尝试在本示例中将 display:none 添加到底部 div ——即使它是第一次它也会“隐藏”已经隐藏，但再次点击后会同步）api.jquery.com/toggleClass