单击特定图像时出现jquery下拉面板

Question

我有一堆图像，我想在点击特定图像时让面板下拉。每个面板的内容对于该特定图像是唯一的。因此，如果图像都在一行中，我希望一个下拉菜单落在图像行下方，但内容将根据点击的图像而有所不同。此外，还有多行图像，因此如果点击第2行上的图像，我更倾向于让第3行及以下的所有图像也向下移动。

有人可以帮助我下面的代码，看看我该怎么办，让它对照片独一无二吗？抱歉格式不佳，这是我的第一篇文章。

HTML：

<li class="flip"rel=""><img src="./img/jane.jpg"/></li>
<li rel=""><img src="./img/bill.jpg"/></li>
<li rel=""><img src="./img/john.jpg"/></li>
<li rel=""><img src="./img/jordan.jpg"/></li>

Jquery的：

$(document).ready(function(){
    $(".flip").click(function(){
        $(".panel").slideToggle("slow");
    });
});

CSS：

.panel,
.flip{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
.panel{
    padding:50px;
    display:none;
}