單獨和一起展開摺疊表

Question

我需要能夠通過按下該部分的按鈕來單獨展開和摺疊表的某些部分，但如果用戶想要查看錶中的所有數據，則會在頂部點擊一個按鈕的表來擴大所有的信息。

然後，應用程序仍然可以摺疊它們不感興趣的部分，如果它們然後摺疊整個表格，則所有單元格都應該再次崩潰。

我已經用兩種不同的方式給了這個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); 

       } 
      }); 
     }); 

    }); 

Answer 1

代碼是否正好相反？就在這裏，它看起來像代碼與類名相反。如果沒有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); 

     }