效果：點(diǎn)擊第一行第一張圖片時(shí)展開(kāi)第一張圖片的字圖，隱藏第二行的字圖。同時(shí)，點(diǎn)擊當(dāng)前圖片時(shí)能夠正常的顯示隱藏。

問(wèn)題：點(diǎn)擊當(dāng)前圖片時(shí)會(huì)隱藏了再顯示。有沒(méi)有好心人能夠提示一下應(yīng)該怎么解決這個(gè)bug。非常謝謝！！

圖片展開(kāi)

$(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;

}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。