使用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 上运行？我错过了什么？

- amagumori

---

使用toggle()函数的方式已经在jQuery 1.8中被弃用，并在jQuery 1.9中被移除。请参见此处：http://api.jquery.com/toggle-event/。如果您使用的是jQuery 1.8或更早版本，则该代码可正常工作。 - meub

http://jsfiddle.net/CB2vZ/ - Bali Balo

@DevlshOne .toggle() 仍然存在，但已经使用不同的签名进行重新定义。@meub 发布了相关链接。 - Marc Audet

Bali的解决方案对我有用 - 看起来它不能使用px值。 - amagumori

.height() 返回一个无单位的像素值，这将强制其余的值转换为像素值，因此在 bali 的解决方案中不需要使用 'px' 单位（类似于其他解决方案）。在原始示例中，未使用 .height() 函数，因此需要指定单位才能使事情正常工作。 - Marc Audet

Answer 1

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

- DevlshOne

Answer 2

修复方法很简单：

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

您只需要将高度值添加px单位即可。

请参见演示： http://jsfiddle.net/audetwebdesign/3dd3s/ 强调一下，其他答案中有更好的编码方式来实现此类动画。我只是演示了如何修复错误。

请注意，自jQuery 1.8以来，.toggle的使用已被弃用。 参考：http://api.jquery.com/toggle-event/ 为什么需要单位？

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

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

- Marc Audet

Answer 3

这是你想要的吗？

http://jsfiddle.net/mmDCk/

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

那将切换高度，根据当前高度是40或10。

- Floris