Question

这就是我目前的观点！

$('#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/

这与我正在寻找的非常接近。单独地，它们在垂直滑动方面完美地工作。但是，当显示image1的文本并单击图像2时，文本会出现故障并消失，然后图像2的文本出现在屏幕上（反之亦然）。

我正在查看的是当显示image1文本并单击image2时，image1文本向上滑动（从屏幕中消失），然后image2的文本从完全相同的位置向下滑动。（反之亦然）

Answer 1

slideToggle()函数接受第二个参数，该函数将在滑动完成后运行。因此，您需要做的是在第一个文本之后通过在该函数内调用它来向下滑动第二个文本

http://jsfiddle.net/vk7AE/10/

Answer 2

正如Matthew所说，在幻灯片完成后运行的第二个参数是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/

Jquery隐藏/显示 - 多个Div（一次一个）

2 个答案: