Question

我正在尝试切换div高度，但是当我这样做时，只需点击一次，然后点击一次。无论如何，无论我点击多少次，都能让它切换？谢谢！这是我的代码：

$(document).ready(function () {
    $('#block1').click(function () {
        toggle = document.getElementById('block1').style.height;
        if (toggle <= 30) {
            $("#block1").css('height', '200px');
        } else $("#block1").css('height', '30px');
    });
});

Answer 1

当您使用jQuery时，我建议您使用height()方法，它将返回可以比较而不是String值的Integer值。

$(document).ready(function () {
    $('#block1').click(function () {
        var toggle = $( this ).height();
        if (toggle <= 30) {
            $( this ).css('height', '200px');
        } else $( this ).css('height', '30px');
    });
});

或者您可以使用parseInt功能：

var toggle = parseInt( document.getElementById('block1').style.height, 10) ;

请参阅jsFiddle demo

Answer 2

document.getElementById('block1').style.height返回30px。

'30px' <= 30会返回false，因此高度始终设置为30px。

你可以使用.height()，它返回一个数字，但我建议使用一个类并切换：

http://jsfiddle.net/TQs6h/

$(document).ready(function () {
    $('#block1').click(function () {
        $(this).toggleClass('tall');
    });
});

用javascript切换div的高度

2 个答案: