效果：點擊第一行第一張圖片時展開第一張圖片的字圖，隱藏第二行的字圖。同時，點擊當前圖片時能夠正常的顯示隱藏。

問題：點擊當前圖片時會隱藏了再顯示。有沒有好心人能夠提示一下應該怎么解決這個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;

}

總結

以上是生活随笔為你收集整理的html点击子元素隐藏div,jq 点击div，显示当前div内容，隐藏其他div的子元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。