0

私はこのコードを持っています

jQuery('.button').click(function() {
    jQuery('.div1').animate({width: 'toggle'});
    jQuery('.div2').animate({width: '100%'});
});

一度は問題なく動作します。しかし、もう一度クリックするとdiv2を戻したいと思います。トグルは機能しますが、問題は、div2を非表示にしたくないのですが、アニメーションで幅を狭くするだけです。

それを行うための正しいコードは何でしょうか？

4

4 に答える 4

4

メソッドの外部にフラグを保持します。

var open = false;

jQuery('.button').click(function() {
    open = !open;

    if(open) {
        jQuery('.div1').animate({width: '100%'});
        jQuery('.div2').animate({width: '100%'});
    } else {
        jQuery('.div1').animate({width: '0%'});
        jQuery('.div2').animate({width: '50%'}); // Or whatever else you want to lower it to
    }
});
于 2012-05-01T13:46:21.583 に答える
2

更新されたソリューション

jQuery 1.8で非推奨になり、1.9で削除されたため.toggle、頼りになるソリューションでは、何をすべきかを決定するために、クリックを手動で追跡する必要があります。トグルの一般的なドロップイン置換は次のようになります。

var handlers = [
    // on first click:
    function() {
        jQuery('.div1').animate({width: 'toggle'});
        jQuery('.div2').animate({width: '50%'});
    },
    // on second click:
    function() {
        jQuery('.div1').animate({width: 'toggle'});
        jQuery('.div2').animate({width: '100%'});
    }
    // ...as many more as you want here
];

var counter = 0;
$(".button").click(function() {
    // call the appropriate function preserving this and any arguments
    handlers[counter++].apply(this, Array.prototype.slice.apply(arguments));
    // "wrap around" when all handlers have been called
    counter %= handlers.length;
});

元の回答

あなたは単に使用することができます.toggle：

jQuery('.button').toggle(function() {
    jQuery('.div1').animate({width: 'toggle'});
    jQuery('.div2').animate({width: '50%'});
}, function() {
    jQuery('.div1').animate({width: 'toggle'});
    jQuery('.div2').animate({width: '100%'});
});

クリックするたびに、の表示が.div1完全に切り替わり、幅が.div250％から100％の間で切り替わります。

最初に非表示にした後で再度表示したくない場合は.div1、単に

jQuery('.button').toggle(function() {
    jQuery('.div1').animate({width: 'hide'});
    jQuery('.div2').animate({width: '50%'});
}, function() {
    jQuery('.div2').animate({width: '100%'});
});
于 2012-05-01T13:47:29.050 に答える
0

代わりにtoggleClassを使用し、cssを使用してさまざまなスタイルを処理してみてください。

于 2012-05-01T13:47:04.983 に答える
-1

変数を使用し、クリックするたびに更新します。例：

`
var $toggle = 0;
$('.button').click(function(){
    if($toggle == 0){
        $('.div1').animate({width: '50%'});
        $toggle = 1;
    }else{
        $('.div1').animate({width: '100%'});
        $toggle = 0;
    };

});
`
于 2016-04-06T17:39:25.900 に答える