<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
*{margin: 0;padding:0;}
.box{width: 260px;height: 150px;background: #ffffff;position: absolute;top: 50%;left: 50%;margin:-75px auto auto -130px; }
.group{ list-style: none; }
.group>li{width: 250px;margin: 5px auto;text-align: center;line-height: 36px;color: white;border-radius: 5px;}
.kid{width: 100%;height: 36px;background: #CD2626;cursor: pointer;border-radius: 5px;}
.showHide{width: 100%;display: none;margin:5px auto;height:134px;}
.showHide > ul > li{margin: 3px auto;background: #90e8ea;}
</style>
</head>
<body>
<div class="box">
<ul class="group">
<li>
<div class="kid">first</div>
<div class="showHide">
<img src="img/1.jpg" alt=""width="100%"/>
</div>
</li>
<li>
<div class="kid">second</div>
<div class="showHide">
<img src="img/2.jpg" alt=""width="100%"/>
</div>
</li>
<li>
<div class="kid">third</div>
<div class="showHide">
<img src="img/3.jpg" alt=""width="100%"/>
</div>
</li>
</ul>
</div>
</body>
<script>
$(function(){
var index = 0;
$('.kid').click(function(){
//这是方法一
/*if(index != $(this).text()){//如果点击的标签内容与index相等则执行以下事件
$('.showHide').slideUp();//将所有的showHide都关闭你掉
$(this).siblings().slideToggle();//打开点击的showHide标签
index = $(this).text();//将点击的标签内容赋值给index
}else{//相等的情况执行以下事件即为第二次点击时
$('.showHide').slideUp();//关闭showHide标签
index = 0;//再将0赋值给index
}*/
//这是方法二
$(this).siblings().slideToggle().parent().siblings().children(":last-child").slideUp();
//$(this).siblings()是找到showHide
//$(this).siblings().slideToggle()是点击kid时显示或者关闭
//$(this).siblings().slideToggle().parent()是找到showHide的父级li
//$(this).siblings().slideToggle().parent().siblings()是除点击此li之外的li
//$(this).siblings().slideToggle().parent().siblings().children(":last-child")是找到未点击li的最后一个子级
//$(this).siblings().slideToggle().parent().siblings().children(":last-child").slideUp();是打开点击的图片，关闭未点击的图片
})
});
</script>
</html>
浙公网安备 33010602011771号