javascript - 在jQuery中切换div的高度

Question

这个问题已经得到解决，但没有一个解决方案对我有用。

我提到了这个较早的问题，解决了同样的问题：

我注意到其中一个响应给出了这个 jsfiddle 链接，它实现了我想要的确切功能，并且可以工作。

    $("#topbar").toggle(function(){
      $(this).animate({height:40},200);
    },function(){
      $(this).animate({height:10},200);
    });

但是当我将框架更改为 jQuery 1.4.4 以外的任何内容时，页面一加载，div 就会立即消失。这是我在自己的项目中遇到的问题。

关于如何让 jsfiddle 在 jquery 2.x 上工作的任何想法？我错过了什么？

Answer 1

修复很简单：

$("#topbar").toggle(function () {
    $(this).animate({
        height: "40px"
    }, 200);
}, function () {
    $(this).animate({
        height: "10px"
    }, 200);
});

您只需将px单位添加到高度值。

参见演示：http: //jsfiddle.net/audetwebdesign/3dd3s/

附言

其他一些发布的答案显示了编码这种类型动画的更好方法。我只是演示了如何修复错误。

请注意，.toggle自 jQuery 1.8 起，这种使用已被弃用。
参考：http ://api.jquery.com/toggle-event/

为什么需要该单元

其他一些解决方案涉及 jQuery.height()函数，它返回一个无单位的像素值。在这种情况下，计算值被强制/强制转换为像素值，因此不需要“px”单位。

在原始示例中，.height()未使用该函数，因此需要指定单位才能使事情正常工作。

Answer 2

jQuery

$("#topbar").click(function () {
    $(this).animate({
        height: ($(this).height() == 40) ? 10 : 40
    }, 200);
});

CSS

#topbar {
    background: orange;
    color: white;
    display:block;
    width:100%;
    text-align:center;
    height:40px;
}

HTML

<div id='topbar'>toggle me</div>

jsFiddle

Answer 3

这就是你想要的吗？

http://jsfiddle.net/mmDCk/

$("#topbar").click(function() {
    $(this).animate({
        height: ($(this).height() == 10) ? 40 : 10
    }, 200);
});

这将根据当前的高度将高度切换为 40 或 10。