jquery - jQueryでCSSの高さを切り替えますか?

Question

jQueryを使用して、クリックするとdivの高さを切り替えようとしています。これが私が試していることです：

$("#otherBox").click(function() {
    if($(this).css("height") == "200") {
        $(this).css("height", "300")
    }
    else {
        $(this).css("height", "200")
    }
})

高さが 200 の場合は 300 に設定され、その逆も同様に設定されるようにしようとしています。なぜこれが機能しないのですか？

また、（ のようなslideToggle）高さの間をスムーズに移動できる方法があれば便利です。

Answer 1

200ではなく「200px」を取得し、これをjQueryでラップする必要があるため、parseIntを使用します

if(parseInt($(this).css('height')) ==200)

Answer 2

これを試して：

$("#otherBox").click(function() {
    if($(this).height() == 200)
        $(this).height(300);
    else
        $(this).height(200);
});

Answer 3

私はこれらの質問をたくさん見ます。私の答えは、常に$.toggle()jQuery で見過ごされがちな関数です。

$("#otherBox").toggle(
    function() {
        $(this).css({height: 300});
    },
    function() {
        $(this).css({height: 200});
    },
);

このコードは、クリック時に指定された機能を実行し、2 つの機能を交互に実行します。

(この関数は、 のより標準的な使用法に対してめったに使用されないオーバーロードであるため、ドキュメントでは見落とされがちです$.toggle()。)

Answer 4

$(this).css({"height":"300px"});

デモを見る