javascript 在 jQuery 中切换 div 的高度

Toggling height of div in jQuery

提问by amagumori

This question has been already addressed, but none of the solutions have worked for me.

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

I referred to this earlier question addressing the same problem:

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

I noticed that one of the responses gave this jsfiddle link, which implements the exact functionality that I want, and works.

我注意到其中一个响应给出了这个 jsfiddle link，它实现了我想要的确切功能并且有效。

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

But when I changed the framework to anything but jQuery 1.4.4, the div starts instantly disappearing as soon as the page loads. This is the problem I've been having on my own project.

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

Any ideas on how to get that jsfiddle working on jquery 2.x? What am I missing?

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

采纳答案by Marc Audet

The fix is simple:

修复很简单：

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

You just need to add pxunits to the height value.

您只需要为px高度值添加单位。

See demo at: http://jsfiddle.net/audetwebdesign/3dd3s/

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

PS

聚苯乙烯

Some of the other posted answers show a better way of coding this type of animation. I simply demonstrated how to fix the bug.

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

Note that this use of .togglehas been deprecated since jQuery 1.8.
Reference: http://api.jquery.com/toggle-event/

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

Why The Unit is Needed

为什么需要单位

Some of the other solutions involve the jQuery .height()function, which returns a unit-less pixel value. In this case, the computed value is coerced/cast to be a pixel value, so the 'px` unit is not required.

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

In the original example, the .height()function was not used so the units needed to be specified to make things work.

在最初的示例中，.height()没有使用该函数，因此需要指定单位才能使工作正常进行。

回答by DevlshOne

jQuery

jQuery

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

CSS

CSS

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

HTML

HTML

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

jsFiddle

js小提琴

回答by Floris

Is this what you're going for?

这是你要去的吗？

http://jsfiddle.net/mmDCk/

http://jsfiddle.net/mmDCk/

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

That will toggle the height to either 40 or 10 depending on what it is at the moment.

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