qq好友列表（html简单方法）

最新推荐文章于 2024-08-08 10:33:11 发布

头秃患者77

最新推荐文章于 2024-08-08 10:33:11 发布

阅读量98

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/pig_pig7/article/details/135187235

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           ul{
               list-style: none;
           }
           .wrap{
               width: 200px;
               margin: 20px auto;
           }
           #tlist>li{
               background: lightblue;
               cursor: pointer;
               font-size: 20px;
               line-height: 2;
           }
           #tlist>li>i{
               display: inline-block;
               width: 0;
               height: 0;
               line-height: 0;
               border: 5px solid #6D6F6F;
               border-color: #6D6F6F transparent;
               border-bottom: 0;
               vertical-align: middle;
               margin: 0 5px;
               transform: rotate(-90deg);
               transition: all 1s;
           }
           .flist{
               background: #FFFAF1;
               display: none;
           }
       </style>

       <script type="text/javascript">
           window.onload = function(){
               var tLi = document.getElementsByClassName('tli');
               var fUl = document.getElementsByClassName('flist');
               var ti = document.getElementsByTagName('i');
               // console.log(tLi,fUl,ti);
               for(var i = 0; i < tLi.length; i++){
                   tLi[i].index = i;
                   tLi[i].onclick = function(){
                       for(var i = 0; i < tLi.length; i++){
                           ti[i].style.transform = "rotate(-90deg)";
                           console.log(ti[i])
                           fUl[i].style.display = 'none';
                       }
                       ti[this.index].style.transform = "rotate(0deg)";
                       fUl[this.index].style.display = 'block';
                   }
               }
           }
       </script>

   </head>
   <body>
       <div class="wrap">
           <ul id="tlist">
               <li class="tli"><i></i>我的好友
                   <ul class="flist">
                       <li class="fli">张三</li>
                       <li class="fli">李四</li>
                       <li class="fli">二狗</li>
                   </ul>
               </li>
               <li class="tli"><i></i>我的家人
                   <ul class="flist">
                       <li class="fli">小张</li>
                       <li class="fli">小代</li>
                       <li class="fli">小孙</li>
                   </ul>
               </li>
               <li class="tli"><i></i>我的同学
                   <ul class="flist">
                       <li class="fli">小张</li>
                       <li class="fli">小明</li>
                       <li class="fli">小孙</li>
                   </ul>
               </li>
           </ul>
       </div>
   </body>
</html>

头秃患者77

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
qq好友列表（html简单方法）

李四</li><li class="fli">小张</li><li class="fli">小代</li><li class="fli">小孙</li><li class="fli">小张</li><li class="fli">小孙</i>我的好友。<li class="tli"><i></i>我的家人。<li class="tli"><i>
复制链接

扫一扫