JQuery条件语句问题：点击按钮时#footer的padding-top无法切换

嘿，咱们来拆解下你遇到的问题，然后给出可行的修复方案：

问题出在哪？ #

1. 动画没跑完就拿高度：你调用$(".box").stop().fadeToggle(10)之后立刻去取outerHeight()，但哪怕是10ms的动画，元素的显示/隐藏状态还没完全切换，这时候拿到的高度根本不对——比如隐藏时高度是0，刚要显示时高度也还没加载出来。
2. 没做状态切换逻辑：当前代码每次点击都把#footer的padding-top设成box的高度，完全没判断现在是要展开还是收起，自然没法切回0。

修复后的代码方案 #

我们可以利用fadeToggle的回调函数（动画完成后再处理），这样能保证高度获取准确，同时加上状态判断实现切换：

修正后的JavaScript代码 #

$(document).ready(function() {
  $("button").click(function() {
    var $box = $(".box");
    // 执行fadeToggle，在动画结束的回调里处理padding-top
    $box.stop().fadeToggle(10, function() {
      // 动画完成后，判断box是否可见，对应设置高度
      var targetPadding = $box.is(":visible") ? $box.outerHeight() : 0;
      $("#footer").css("padding-top", targetPadding);
    });
  });
});

为啥这么改？ #

• 用动画回调保证准确性：fadeToggle的第二个参数是动画完成后的回调函数，这时候元素的显示状态已经完全确定，拿到的outerHeight()是真实的最终高度。
• 通过可见性判断实现切换：用$box.is(":visible")来判断当前是展开还是收起状态，对应给#footer设置box高度或者0，完美实现点击切换的需求。

另外提一句，你之前试的toggle(function(){})是jQuery 1.8及更早版本的写法，1.9之后已经被移除了，所以现在用这种回调+状态判断的方式更稳妥~

内容的提问来源于stack exchange，提问作者sel