huanggr
原生JS实现列表点击展开效果
在原生js的世界里自由翱翔，是一件非常好的事，今天我带来的就是使用原生的Js来实现一个点击列表展示效果，在点击就复原的效果，原理就是通过操作DOM来改变元素的宽高，控制class的切换，以此来实现效果，下面就是源码实现，源码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!doctype html> <html> <head> <meta charset="utf-8"/> <title>列表展开</title> </head> <style type="text/css"> *{margin:0;padding:0;list-style:none;} dl{width:1200px;height:96px;padding:10px 84px;border:1px solid #ddd; border-radius:3px;background:#f6f6f6;box-sizing:border-box;margin:20px auto;position:relative;overflow:hidden;} dt{position:absolute;left:10px;top:20px;} dd{} input{position:absolute;width:60px;height:30px;line-height:30px;right:20px;top:20px;} a{text-decoration: none;display:inline-block;width:60px;height:30px;line-height:30px;text-align:center;background:#ddd;border-radius:3px;margin-right:8px;margin-top:8px;color:#333;} a.active{background:orange;color:white;} </style> <body> <dl> <dt>类型:</dt> <dd><a href="#" class="active">索芙特</a><a href="#">索芙特</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a><a href="#">索芙特</a><a href="#">霸王</a><a href="#">舒肤佳</a></dd> <input type="button" value="展开"/> </dl> </body> <script type="text/javascript"> //第一步:获取事件源 var dl=document.querySelector("dl"); var inpu=document.querySelector("input"); var aaa=document.querySelectorAll("a"); inpu.onclick=function(){ if(dl.style.height=='96px'){ dl.style.height="auto"; this.value="收起" }else{ dl.style.height="96px"; this.value="展开" } } for(var i=0;i<aaa.length;i++){ aaa[i].onclick=function(){ for(var i=0;i<aaa.length;i++){ aaa[i].className="" } this.className="active" } } </script> </html> |
7