<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;border:0;font-family: "微软雅黑";} ul,ol{list-style:none;} a{text-decoration:none;color:#333;} em,i{font-style:normal;} body{background: #f2f2f2;} .clearfix:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";} .fl{float:left;display:inline-block;} .fr{float:right;display:inline-block;} .div{width: 330px;margin: 100px auto;background: #ffffff;padding-top:10px; padding-bottom: 10px;border:1px #dfdfdf solid;} .div h3{width: 277px;height:43px;background: #f6f6f4;margin: 0 auto;border:1px #ebebeb solid;border-radius: 9px;font-size: 14px;color:#b1926f;line-height: 45px;padding-left: 34px;background:url(images/zakladka.png) center 0 no-repeat; } .div span{display: block;width:26px;height:37px;float:right;background: url(images/on1.png) center 0 no-repeat;cursor: pointer;} .div ul{width: 270px;margin-left:40px; display: none;} .div ul li{width: 260px;height: 26px;font-size: 12px;color: #bca94c;line-height:26px; cursor:pointer;} .div .spbg{background: url(images/on2.png) center 0 no-repeat;} .div .on{display: block;animation:on 0.6s ease;animation-fill-mode: forwards;} @keyframes on{ 0%{height: 0px;opacity: 0.2;} 25%{opacity: opacity:0.5;} 50%{opacity: 0.7} 100%{height: 140px; opacity: 1;} } .div .off{display: block;animation:off 0.6s ease;animation-fill-mode: forwards;} @keyframes off{ 0%{height: 140px;} 30%{opacity: 0.3;} 100%{height: 0px; opacity: 0; visibility:hidden;} } </style> </head> <body> <div class="div""> <h3><span class="spbg"></span>Item 1</h3> <ul class="on"> <li>Item without sunitms</li> <li>Item without sunitms</li> <li>Item without sunitms</li> <li>Item without sunitms</li> <li>Item without sunitms</li> </ul> <h3><span></span>Item 2</h3> <ul> <li>Item without sunitms</li> <li>Item without sunitms</li> <li>Item without sunitms</li> <li>Item without sunitms</li> <li>Item without sunitms</li> </ul> <h3 ><span></span>Item 3</h3> <ul> <li>Item without sunitms</li> <li>Item without sunitms</li> <li>Item without sunitms</li> <li>Item without sunitms</li> <li>Item without sunitms</li> </ul> <h3 >Item without sunitms</h3> <h3 >Item without sunitms</h3> </div> <script> var div = document.getElementsByClassName("div")[0]; var uls = div.getElementsByTagName("ul"); var lis = div.getElementsByTagName("li"); var span = div.getElementsByTagName("span"); var len = lis.length; var liH = 26; var finish = false; for(i = 0; i < span.length; i++){ span[i].index = i; span[i].onclick = function(){ if(!finish){ this.className = "spbg"; uls[this.index].className = "on"; finish = true; }else{ this.className = ""; uls[this.index].className = "off"; finish = false; } } } </script> </body> </html>
![](https://img2024.cnblogs.com/blog/35695/202408/35695-20240825082459112-376424429.jpg)