열기/닫기 슬라이딩 패널 전환

Question

나는 프로젝트에서 일해 왔으며 거의 ​​완벽하게 작동하지만 장애물이 하나 더 있습니다.

$(document).ready(function() { 
$("a.shareTab").each(function(index, item) { 
$(this).on("click", function() { 
    $('.sharepanel' + $(item).data("panel")).animate({ 
    'width': 'show' 
    }, 1000, function() { 
    $('.sharepanel' + $(item).data("panel") + ' .shareFade').fadeIn(100); 
    }); 
}); 
}); 

$('.shareClose').on('click', function() { 
$('div.shareFade').fadeOut(100, function() { 
    $('.sharePanel').animate({ 
    'width': 'hide' 
    }, 1000); 
}); 
}); 
}); 

각 패널은 그렇게 중복 당신이 다음 캔트 첫 번째 패널을 열고 마지막 패널을 열면 하나가 열릴 때, 그것은 아래 바이올린, 패널을 닫습니다 토글을 추가 할 수 있습니다 열립니다

.

FIDDLE

Answer 1

한 가지 방법은 패널이 클릭되면 모든 패널을 숨기 다음 원하는 패널을 다시하는 것입니다.

$(document).ready(function() { 
    $("a.shareTab").each(function(index, item) { 
    $(this).on("click", function() { 
     $('.sharePanel').hide(); 
    $('.sharepanel' + $(item).data("panel")).animate({ 
     'width': 'show' 
    }, 1000, function() { 
     $('.sharepanel' + $(item).data("panel") + ' .shareFade').fadeIn(100); 
    }); 
    }); 
    }); 

    $('.shareClose').on('click', function() { 
    $('div.shareFade').fadeOut(100, function() { 
    $('.sharePanel').animate({ 
     'width': 'hide' 
    }, 1000); 
    }); 
    }); 
}); 

는 여기에, 이것은 아마 쉽게 변화 Fiddle