jquery - 如果选中任何复选框，则向下滑动一个 div，反之亦然

Question

我的网站上有一点 PM 功能。我希望用户能够删除消息。我还有 jQuery 脚本，当你选中一个复选框时，它会显示你可能想要执行的功能（删除、存档和那些东西）。

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

我从stackoverflow上的另一个问题中得到它。但是现在，如果我有很多消息，那么我将有尽可能多的复选框。如果我检查第一个，则会显示功能。但是当我检查第二个时，它再次向上滑动。所以我不能使用slideToggle()，我想不出任何其他的方法来做到这一点。

如果您选中某些复选框，我要做的是向下滑动（显示）功能，然后当您取消选中它们时，它应该再次向上滑动

Answer 1

你可以试试这个：http: //jsfiddle.net/e4Gjj/2/

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

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

你的意思是：

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

Answer 4

使用slideUp并slideDown 尝试这个

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

});