切換打開/關閉滑動面板

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