Jquery隱藏/顯示 - 多個Div（一次一個）

這是我目前的觀點！Jquery隱藏/顯示 - 多個Div（一次一個）

$('#img-expand').click(function() { 
$('[id^="work-info"]').not('#work-info').hide(); 
$("#work-info").slideToggle("slow"); 
}); 
$('#img-expand_2').click(function() { 
$("#work-info").slideToggle("slow"); 
$('[id^="work-info"]').not('#work-info_2').hide(); 
$("#work-info_2").slideToggle("slow"); 
});

http://jsfiddle.net/vk7AE/8/

這是非常接近我要找的。單獨地，他們在垂直滑動方面完美地工作。但是，當圖像1的文本正在顯示並且圖像2被點擊時，文本會出現毛刺並消失，然後圖像2的文本出現在屏幕上（反之亦然）。

當我們看到image1文本並單擊image2時，image1文本向上滑動（從屏幕消失），然後image2文本從完全相同的位置向下滑動。（反之亦然）

來源

2013-11-14 Daniel

正如馬修所說，幻燈片完成後第二個參數是key。

爲了凝聚碼成一個功能我改變了你的image-expand id來image-expand_1和你的工作信息work-info_1

$("[id^=img-expand]").click(function() { 
    var clickedImg = $(this); 
    if($('[id^="work-info"]').not('#work-info'+$(this).attr('id').substring($(this).attr('id').indexOf('_'))).is(':visible')) 
    $('[id^="work-info"]:visible').slideUp("slow",function(){ 
     $('#work-info'+clickedImg.attr('id').substring(clickedImg.attr('id').indexOf('_'))).slideDown("slow"); 
    }); 
    else 
     $('#work-info'+clickedImg.attr('id').substring(clickedImg.attr('id').indexOf('_'))).slideToggle("slow");  
});

小提琴一樣

http://jsfiddle.net/vk7AE/51/

來源

2013-11-14 20:59:17 Trevor

感謝您的答覆！當我嘗試向HTML中添加更多元素時，slideUP和SlideDown特效會丟失，理想情況下，我要查找的是與您在答案中給出的效果相同的四個項目總計.http：//jsfiddle.net/ vk7AE/49/ – Daniel

@丹尼爾檢查我的更新答案。 – Trevor