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';
    });
});

demo

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

4 个答案: