Question

我在我创建的工具上设置了控制台。单击时可以最小化控制台，再次单击时可以最大化控制台。

然而问题是，一旦我最大化它，它只是在它完成时最小化。我有什么选择？

$('#consolebutton').mouseup(function() {
        if ($('#footconsole').height(200)) {
            $('#footconsole').animate({
                height: 14
            }, 100)
        } else if ($('#footconsole').height(14)) {
                $('#footconsole').animate({
                height: 200
            }, 100);
        }
});

（我确实意识到检查div的高度，实际上是设置div的高度，这就是问题。）

http://jsfiddle.net/VaDBW/3/

Answer 1

试试这个......

$('#consolebutton').mouseup(function() {
    var $footconsole = $('#footconsole');
    if ($footconsole.height() == 200) {
        $footconsole.animate({
            height: 14
        }, 100)
    } else {
        $footconsole.animate({
            height: 200
        }, 100);
    }
});

它与高度进行比较（而不是设置），我还将变量设置为$("#footconsole")的值，而不是继续搜索它。

Answer 2

不带参数调用height()方法。没有参数，它返回当前高度。传递参数时，它正在设置高度。

例如

if($('#footconsole').height() == 14)。虽然在我看来你最好在data中保存状态标志而不是检查身高

if($('#footconsole').data('collapsed'))
{
    $('#footconsole').data('collapsed', false);
    /* do expand code */
} else {
     $('#footconsole').data('collapsed', true);
     /* do collapse code */
}

您还可以使用课程来定义设置，如果您只需要切换课程，则可以与hasClass核对以进行进一步调整。很多选择。但是离开原始高度似乎有点奇怪。

Answer 3

我会在click（function（）{...}）中使用toggleClass（）;然后你不需要if语句，你可以把高度差放在CSS中。

在mouseup上切换CSS

3 个答案: