2010-06-21 8 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); 

     }