Развернуть Свернуть таблицу отдельно и вместе

Question

Мне нужно иметь возможность развернуть и свернуть отдельные разделы таблицы индивидуально, нажав кнопку этого раздела, но если пользователь хочет видеть все данные в таблице, они нажимают одну кнопку вверху таблицы, чтобы развернуть всю информацию.

Теперь использование должно быть в состоянии свернуть разделы, которые им не интересны, и если они затем разрушают всю таблицу, все ячейки должны снова свернуть.

Я дал это bash двумя разными способами, и это близко, но мой логикс не позволяет мне. Я был бы рад узнать, пожалуйста.

$(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); 

     }