jQuery에서 여러 개의 패널 슬라이딩 및 숨기기

Question

각 행에 여러 행이있는 테이블을 선택 목록으로 사용하고 선택에 따라 (onchange 이벤트가 실행될 때) 행 아래에 추가 데이터가 포함 된 패널이 나타납니다. 현재 코드가 있습니다. 이 같은 : 패널이 이미 열려있는 경우 페이지가로드 나는 새로운 패널을 재개 전에 종료 슬라이드 할 때

var allPnls = '.inv-dtl-comnts-add,.inv-dtl-comnts-update'; 
    $(document).ready(function(){ 
    hideAll(); 

    //select action change 
    $(".inv-dtl-ddlaction").change(onSelectChange); 

    $(".btn-cancel").click(function(event){ 
     slideAll(); 
     $(".inv-dtl-ddlaction").val('[Select an Action]'); 
     return false; 
    }); 

}); 

    function onSelectChange(event){ 

    //find out which select item was clicked 
    switch($(this).val()) 
    { 
     case 'View/Add Comment': 
      $(this).closest(".row").children(allPnls).slideUp("fast", 
       function(){ 
        $(this).closest(".row").children(".inv-dtl-comnts-add").slideToggle("fast"); 
      }); 
      break; 
     case 'Change Status': 
      $(this).closest(".row").children(allPnls).slideUp("fast", 
       function(){ 
        $(this).closest(".row").children(".inv-dtl-comnts-update").slideToggle("fast"); 
      }); 
      break; 
     default: 
      //code to be executed if n is different from case 1 and 2 
    } 

} 

function hideAll(){ 
    $(allPnls).hide(); 
} 
function slideAll(){ 
    $(allPnls).slideUp("fast"); 
} 

그래서 나는 모든 패널을 숨기고 있어요. 이것은 포스트 백과 함께 작동합니다. 선택에서 한 패널만으로도 효과적 이었지만 두 패널에서 두 번 미끄러지는 현상이 두 번 발생합니다 (미개척 패널을 미끄러 져 다시 밀어 올리는 것처럼 보입니다). 변수 allPnls에 나열된 모든 패널을 슬라이드가 열려있는 경우에만 닫을 수 있도록이 설정을 조정하는 방법은 무엇입니까? 패널을 닫은 다음 slideToggle이 작동하도록 콜백하는 것이 더 좋은 방법입니까?

로이드

Answer 1

당신은을 추가하여에서만 볼 수 또는 오픈 패널을 종료 할 수 있습니다 : 보이는 아래와 같은 선택에 :

var allPnls = '.inv-dtl-comnts-add:visible,.inv-dtl-comnts-update:visible'; 

나는이 비록 문제를 해결하는 것입니다 경우 모르겠어요. 어쩌면이 문제를 나타내는 샘플 페이지를 제공하면 도움이 될 것입니다.