2010-06-21 102 views
1

我需要能够通过按下该部分的按钮来单独展开和折叠表的某些部分,但如果用户想要查看表中的所有数据,则会在顶部点击一个按钮的表来扩大所有的信息。单独和一起展开折叠表

然后,应用程序仍然可以折叠它们不感兴趣的部分,如果它们然后折叠整个表格,则所有单元格都应该再次崩溃。

我已经用两种不同的方式给了这个bash,这很接近,但是我的logix让我失望了。我会很高兴看到它。

$(function() { 
     var collapseIcon = 'images/btn-open.gif'; 
     var collapseText = 'Collapse this section'; 
     var expandIcon = 'images/btn-closed.gif'; 
     var expandText = 'Expand this section'; 

     var $tableNum = 0; 

     $(".openCloseBtn").each(function (i) { 
      var $section = $(this); 
      $tableNum = i + 1 
      $($section).attr('src', collapseIcon) 
      .attr('alt', collapseText) 
      .addClass('clickable') 
      .click(function() { 
       if ($section.is('.collapsed')) { 
        $section.removeClass('collapsed'); 
        $(this).attr('src', collapseIcon) 
        .attr('alt', collapseText); 
        $('.table' + i).fadeOut("slow"); 
       } 
       else { 
        //alert('i = ' + i) 
        $section.addClass('collapsed'); 
        $('.table' + i).fadeIn("slow"); 
        $(this).attr('src', expandIcon) 
        .attr('alt', expandText); 

       } 

      }); 

     }); 

     $('#ViewAll').click(function() { 
      $(".openCloseBtn").each(function (i) { 
       var $section = $(this); 
       if ($section.is('.collapsed')) { 
        $section.removeClass('collapsed'); 
        $(this).attr('src', collapseIcon) 
        .attr('alt', collapseText); 
        $('.table' + i).fadeOut("slow"); 
       } 
       else { 
        //alert('i = ' + i) 
        $section.addClass('collapsed'); 
        $('.table' + i).fadeIn("slow"); 
        $(this).attr('src', expandIcon) 
        .attr('alt', expandText); 

       } 
      }); 
     }); 

    }); 

回答

0

代码是否正好相反?就在这里,它看起来像代码与类名相反。如果没有collapsed类,则该行将淡出。你可以尝试使用.toggle,所以jQuery将处理所有事情。

 if ($section.is('.collapsed')) { 
      $section.removeClass('collapsed'); 
      $(this).attr('src', collapseIcon) 
      .attr('alt', collapseText); 
      $('.table' + i).fadeOut("slow"); 
     } 
     else { 
      //alert('i = ' + i) 
      $section.addClass('collapsed'); 
      $('.table' + i).fadeIn("slow"); 
      $(this).attr('src', expandIcon) 
      .attr('alt', expandText); 

     }