效果图：（没有加太多样式，原理理解就好） 代码如下： !DOCTYPE htmlhtml head meta charset="UTF-8" title/title script src="../js/jquery-3.4.0.min.js" type="text/javascript" charset="utf-8"/script script type="text/java
效果图：（没有加太多样式，原理理解就好）
代码如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.4.0.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("#all div p").click(function(){ $(this).parent().siblings().children("img").slideUp();//将别的父类的相对应的孩子收起来 $(this).siblings().slideDown();//这两句通俗的来说，兄弟们 退后，我要装逼了 }) }) </script> <style type="text/css"> *{ margin: 0px; padding: 0px; } #all{ height: 650px; width: 340px; border: 1px solid antiquewhite; } #all div{ font-size: 0px; } p{ width: 340px; height: 30px; line-height: 30px; background-color: orangered; font-size: 18px; text-align: center; border: 1px solid black; cursor: pointer; } #all div img{ width: 340px; height: 530px; display: none; } </style> </head> <body> <div id="all"> <div> <p>美女一</p> <img src="../img/girl2.jpg"/> </div> <div> <p>美女二</p> <img src="../img/girl3.jpg"/> </div> <div> <p>美女三</p> <img src="../img/girl4.jpg"/> </div> <div> <p>美女四</p> <img src="../img/girl5.jpg"/> </div> </div> </body></html>