jquery - チェックボックスがオンになっている場合は、div を下にスライドし、その逆も同様です。

Question

私のウェブサイトには小さなPM機能があります。ユーザーがメッセージを削除できるようにしたい。また、チェックボックスをオンにしたときに実行したい機能 (削除、アーカイブなど) を示す jQuery スクリプトもあります。

$('.checkbox').change(function(){
    var c = this.checked ? '400' : '200';
    $('#functions').slideToggle(c);
});

ここで、stackoverflow に関する別の質問から取得しました。しかし今、メッセージが多い場合は、チェックボックスも同じ数になります。最初に確認すると、機能が表示されます。でも2枚目を確認すると、またスライドアップ。そのため、slideToggle() を使用することはできず、それ以外の方法は考えられません。

私がやろうとしているのは、いくつかのチェックボックスをオンにすると機能を下にスライド（表示）し、チェックを外すと再び上にスライドすることです

Answer 1

これを使用slideUpしてslideDown 試してください

 $('.checkbox').change(function(){
   if(this.checked){
      $('#functions').slideDown(400)
   }else{
      $('#functions').slideUp(200)
   }

});

Answer 2

アニメーションを使ってみてください:

$(function() {
    $(":checkbox").change(function(){
        if($(this).is(':checked')) {
            $("#functions").animate({"width":"400px"});
        } else {
            $("#functions").animate({"width":"300px"});
        }
    });
});

この JSFiddle を参照してください: http://jsfiddle.net/nthef/16/

Answer 3

これを試すことができます： http://jsfiddle.net/e4Gjj/2/

$('.checkbox').change(function(){
    var idx = $(this).index()-1;
    $('div.functions').children('div').eq(idx).slideToggle(400);  
});

Answer 4

あなたは次のようなことを意味します：

$('.checkbox').filter(":checked").length ? 
     $('#functions').slideDown() : $('#functions').slideUp();