jquery - jQuery条件如果高度

Question

这个 jquery 函数工作正常，但我想介绍“if”。如果再次点击高度为40，height = auto

$(document).ready(function() {
   $(".admintitle").click(function() {
        $(".1").animate({height:40});
        $('.admintitle').css('background-position', '0px 0px');
    });
 });

Answer 1

使用它们$(".1").width()并将$(".1").height()它们与您的价值观进行比较。

$(document).ready(function() {
   $(".admintitle").click(function() {
        if ($(".1").width() === 40 && $(".1").height() === 140); {
            $(".1").animate({height:40});
            $('.admintitle').css('background-position', '0px 0px');
        }
    });
 });

Answer 2

动画到auto高度将不起作用，因为动画仅适用于数值

$(document).ready(function () {
    var flag = false;
    $(".admintitle").click(function () {
        if (flag) {
            $(".1").height('auto');
        } else {
            $(".1").animate({
                height: 40
            });
        }
        $('.admintitle').css('background-position', flag ? '0px -20px' :  '0px 0px');
        flag = !flag;
    });
});

演示：小提琴

如果元素具有固定高度，另一种解决方案是使用计算高度

$(document).ready(function () {
    var $1 = $(".1"),
        $title = $(".admintitle"),
        flag = false,
        height = $1.height();
    $title.click(function () {
        $1.animate({
            height: flag ? height : 40
        });
        $('.admintitle').css('background-position', flag ? '0px -20px' :  '0px 0px');
        flag = !flag;
    });
});

演示：小提琴