-1

私の jQuery コードは、クリック時に div の高さを 200px から 100% に変更します。これは完璧に機能します。しかし、同じ要素であるもう一度クリックすると、divが200pxに戻る必要があります。if ステートメント以外でこれを行う方法がわかりませんが、css プロパティが特定の css プロパティと一致するかどうかを確認する方法がわかりません。

これが私のコードです。

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

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

    });

</script>
4

4 に答える 4

2

両方のクラスを定義してtoggleClassを使用するか、次を使用します。

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

デモ

于 2012-10-05T20:29:37.910 に答える
2

高さ 100% の css クラスを定義し、クリックしてクラスを切り替えます。

CSS

.classname {
    height: 100%
}

JS

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

css クラスを使用してスタイルを追加することを常にお勧めします。そのため、多数のスタイルを追加する必要がある場合でも、簡単に追加/削除でき、js コードを減らすことができます。

于 2012-10-05T20:21:15.840 に答える
2

var isPort1Max = false; という変数を追加できます。

次に、onclick関数で設定できます。 

var isPort1Max = false;

function() {
    if (isPort1Max){
        $(".ppc").css("height","100%");
        isPort1Max=true;
    else {
        $(".ppc").css("height","200px");
        isPort1Max=false;
    }
}
于 2012-10-05T20:23:14.840 に答える
2 
$('#port1').toggle(function () {
    $(".ppc").css({height: "100%"});
}, function () {
    $(".ppc").css({height: "200px"});
});
于 2012-10-05T20:23:31.713 に答える