效果：点击第一行第一张图片时展开第一张图片的字图，隐藏第二行的字图。同时，点击当前图片时能够正常的显示隐藏。
问题：点击当前图片时会隐藏了再显示。有没有好心人能够提示一下应该怎么解决这个bug。非常谢谢！！
图片展开
$(document).ready(function() {
$(".zhe").hide('slow');
$(".first").click(function() {
var index = $(this).index();
$(".zhe").hide('slow');
$(".zhe").eq(index).show('slow');
})
})
//以下是css代码
* {
padding: 0;
margin: 0;
}
img {
width: 200px;
height: 140px;
}
.wrap {
width: 100%;
}
.wrap ul li {
margin-right: 10px;
list-style-type: none;
}
.p-wrap {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.first {
position: relative;
z-index: 99;
display: flex;
flex-direction: row;
height: 140px;
margin-top: 10px;
}
.zhe {
display: none;
margin-left: 10px;
}
.b {
display: flex;
flex-direction: row;
}
