링크에서 두 번째로 클릭 할 때 패널을 표시하는 방법

Question

아래 그림은 왼쪽 링크를 클릭하면 오른쪽 패널이 슬라이드 업처럼 움직이게됩니다. 하지만 같은 링크에서 다시 클릭하면 패널이 숨겨집니다. 하지만 난 그 패널을 숨기고 싶지 않아. 제가 위의 코드에서 수정해야 할 부분을 알려주십시오.

$(function() { 
    $('div.panel').hide(); 
    $('div.panel:first').addClass('active').show(); 
    $('li.link').click(function() { 
     var id = $(this).attr('rel'); 
     var showing = $(id).is(':visible'); 
     $('div.panel').slideUp('slow'); 
     $('li.link').removeClass('active'); 
     if (!showing) { 
      $(id).slideDown('fast', function() { 
       $('html,body').animate({ 
        scrollTop: 0 
       }, 'slow') 
      }); 
      $(this).addClass('active'); 
     } 
    }); 
}); 

Answer 1

는 if 블록 내부의 .slideUp 전화를 이동

. 현재 페이지에 해당하는 링크가 아닌 다른 링크를 클릭 한 경우에만 작업을 수행하려고합니다. ...

$('li.link').click(function() { 
    var id = $(this).attr('rel'); 
    var showing = $(id).is(':visible'); 
    $('li.link').removeClass('active'); 
    $(this).addClass('active'); 
    if (!showing) { 
     $('div.panel').slideUp('slow'); 
     $(id).slideDown('fast', function() { 
      $('html,body').animate({ 
       scrollTop: 0 
      }, 'slow') 
     }); 
     $(this).addClass('active'); 
    } 
});