<!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>