1

クリック時にボックスを展開しようとしていますが、もう一度クリックすると、縮小して通常の状態に戻したいと思います。これは私の現在のコードです。

$(".box").click(function() {
    $(this).toggle(function() {
        $(this).animate({
            width: "200px",
            height: "200px"
            }, "slow" );
        }, function () {
        $(this).animate({
            width: "50px",
            height: "50px"
            }, "slow" );
        });
});

元のサイズは50ピクセルで、50ピクセルと200ピクセルの間で前後に切り替えたいです。このコードを使用すると、ボックスをクリックすると、ボックスが消えます。助言がありますか？

4

1 に答える 1

2

.toggle()これは、jQuery 1.9以降を使用していて、jQueryイベントメソッドがないためです。jQueryは.toggle()表示効果メソッドを使用して要素を非表示にします。.toggle()イベントメソッドはjQuery1.7で非推奨になり、jQuery1.9で削除されました。

$(".box").click(function() {
    var $this = $(this),
        val = $this.height() == 200 ? '50px' : '200px';
    $this.stop().animate({
        width: val,
        height: val
    }, "slow");
});

http://jsfiddle.net/q9UMA/

于 2013-03-19T06:59:31.417 に答える