Javascript 如何实现在单击图片时显示详细信息的下拉子页面？

我尝试实现一个inpage购物车。当您单击产品的图片时，网页将显示该产品的详细信息

以下是谷歌图像搜索的功能：

单击图像时，该图像的详细信息将显示在该图像下方（不在屏幕底部）

这是我的密码。昨天有人帮了我，所以当我点击一张图片时，一些信息会显示在图片下方

但我希望整个

显示在该图片下方（包括该图片和所有信息，尽管它们目前是相同的）

我认为问题肯定出在JQuery脚本中

另外，当您单击第二行图片时，也会出现一些布局问题，一行中可能只有一到两张图片。我不知道为什么，我希望得到一些帮助

$（文档）.ready（函数（）{
$（'img'）。单击（函数（）{
var$img=$（此），
偏移量=$img.offset（），
子页面=$（'.container'）.hide（）.insertAfter（'.pictures'），
nextImage=$img.next（），
finalImage=$img；
如果（！$img.is（':last child'））{
while（offset.top==nextImage.offset（）.top）{
nextImage=nextImage.next（）；
}
finalImage=nextImage.prev（）；
}
subPage.html（“”）.append（$img.clone（））.insertAfter（finalImage.slideDown（）；
});
});

。图片{
文本对齐：居中；
}
.图片img{
显示：内联块；
宽度：200px；
}
.集装箱{
文本对齐：居中；
}
.左货柜{
垂直对齐：中间对齐；
显示：内联块；
边框样式：实心；
边框宽度：5px；
}
.左集装箱img{
}
.右集装箱{
垂直对齐：中间对齐；
显示：内联块；
边框样式：实心；
边框宽度：5px；
}
.颜色组{
文本对齐：居中；
}
.颜色组ul{
填充：0；
}
.颜色组李{
宽度：20px；
显示：内联块；
}

绿叶
玛丽
类别，是否需要供应商？
这是对Green Leaf案例的描述，以防万一，我把它加长了一点，TestSetSetSets

19.99美元

iphone6
iphone6+
三星6S
iPhone5








添加到购物车

感谢大家，通过更改JQuery代码，我找到了答案

一个是.slideToggle，另一个是.attr

$（文档）.ready（函数（）{
$（'.test'）。单击（函数（）{
var$img=$（this）.children（'img'），
子页面=$（'.container'）；
$（'.subpage pic'）.attr（“src”），$img.attr（“src”）；
var offset=$img.offset（），
nextImage=$img.next（），
finalImage=$img；
如果（！$img.is（':last child'））{
while（offset.top==nextImage.offset（）.top）{
nextImage=nextImage.next（）；
}
finalImage=nextImage.prev（）；
}
子页面插入符（finalImage）.slideToggle（'fast'）；
});
});

。图片{
文本对齐：居中；
}
.图片img{
显示：内联块；
}
.集装箱{
文本对齐：居中；
显示：无；
}
.左货柜{
垂直对齐：中间对齐；
显示：内联块；
边框样式：实心；
边框宽度：5px；
}
.左集装箱img{
}
.右集装箱{
垂直对齐：中间对齐；
显示：内联块；
边框样式：实心；
边框宽度：5px；
}
.颜色组{
文本对齐：居中；
}
.颜色组ul{
填充：0；
}
.颜色组李{
宽度：20px；
显示：内联块；
}

绿叶
玛丽
类别，是否需要供应商？
这是对Green Leaf案例的描述，以防万一，我把它加长了一点，TestSetSetSets

19.99美元

iphone6
iphone6+
三星6S
iPhone5








添加到购物车

我稍微调整了你问题的内容。重要的是不要给人留下这样的印象：你希望有人在他们的机器上设置你的代码，并为你进行所有必要的开发<代码>：-）非常感谢你，哈弗