javascript - 在 mouseup 上切换 CSS

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 中。