javascript - jq 点击div，显示当前div内容，隐藏其他div的子元素
本文介绍了javascript - jq 点击div，显示当前div内容，隐藏其他div的子元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
效果：点击第一行第一张图片时展开第一张图片的字图，隐藏第二行的字图。同时，点击当前图片时能够正常的显示隐藏。
问题：点击当前图片时会隐藏了再显示。有没有好心人能够提示一下应该怎么解决这个bug。非常谢谢！！
<!DOCTYPE html>
<html>
<head>
<title>图片展开</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrap">
<ul class="p-wrap">
<li class="first">
<img src="image/1.jpg">
<ul class="zhe">
<div class="b">
<li><img src="image/0.jpg"></li>
<li><img src="image/2.jpg"></li>
</div>
</ul>
</li>
<li class="first">
<img src="image/3.jpg">
<ul class="zhe">
<div class="b">
<li><img src="image/4.jpg"></li>
<li><img src="image/5.jpg"></li>
<li><img src="image/6.jpg"></li>
</div>
</ul>
</li>
</ul>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".zhe").hide('slow');
$(".first").click(function() {
var index = $(this).index();
$(".zhe").hide('slow');
$(".zhe").eq(index).show('slow');
})
})
</script>
</body>
</html>
//以下是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;
}
解决方案
你绑定的点击事件改为给
任意一个绑定都可以，再使用$(this)去控制，就是使用事件委托的方式，假设你的li有很多个，你每个都绑定点击事件，从性能上来说是不好的，所以使用冒泡的方式到父级是很好的，你是用的$(this)就可以指向你点击的那个模块
$(".wrap").on("click",".first",function(){
$(this).toggle();
})
这篇关于javascript - jq 点击div，显示当前div内容，隐藏其他div的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
