jquery - jQuery，在具体到位时更改 css 属性

Question

我的 jQuery 代码在点击时将 div 的高度从 200px 更改为 100%。这很完美。但我需要当我再次单击它时，相同的元素，div 变回 200px。我不知道如何执行此操作，除非使用 if 语句，但我不确定如何查看 css 属性是否与某个 css 属性匹配。

这是我的代码。

<script>
$(document).ready(function() {

        $("#port1").click(function() {
            $(".ppc").css("height","100%");
        });

    });

</script>

Answer 1

定义一个高度为 100% 的 CSS 类，点击，然后切换类

CSS

.classname {
    height: 100%
}

JS

    $("#port1").click(function() {
        $(".ppc").toggleClass('classname');
    });

使用 css 类添加样式总是一个好主意，因此如果您需要添加一大堆样式，则可以轻松添加/删除和更少的 js 代码

Answer 2

您可以添加一个变量 var isPort1Max = false;

然后就可以在onclick函数中设置了。

var isPort1Max = false;

function() {
    if (isPort1Max){
        $(".ppc").css("height","100%");
        isPort1Max=true;
    else {
        $(".ppc").css("height","200px");
        isPort1Max=false;
    }
}

Answer 3

$('#port1').toggle(function () {
    $(".ppc").css({height: "100%"});
}, function () {
    $(".ppc").css({height: "200px"});
});

Answer 4

为两者定义一个类并使用 toggleClass，或使用以下内容：

$("#port1").click(function() {
    $(".ppc").css("height", function(i, val) {
        return val == '200px' ? '100%' : '200px';
    });
});

演示