Question

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

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

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

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

Answer 1

你的意思是：

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

Answer 2

使用slideUp和slideDown 试试这个

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

});

Answer 3

尝试使用animate：

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

看到这个JSFiddle： http://jsfiddle.net/nthef/16/

Answer 4

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

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

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

4 个答案: