html点击子元素隐藏div,jq 点击div，显示当前div内容，隐藏其他div的子元素

效果：点击第一行第一张图片时展开第一张图片的字图，隐藏第二行的字图。同时，点击当前图片时能够正常的显示隐藏。

问题：点击当前图片时会隐藏了再显示。有没有好心人能够提示一下应该怎么解决这个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;

}