【Javascript】入门之QQ列表的实现

最新推荐文章于 2020-12-17 22:35:19 发布

夹心776655

最新推荐文章于 2020-12-17 22:35:19 发布

阅读量369

点赞数

分类专栏：代码实例 js交互设计文章标签： css javascript html

本文链接：https://blog.csdn.net/qq_37086980/article/details/110249141

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

描述: 点击朋友/家人/陌生人, 显示/收起对应列表

代码实现:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ列表</title>
    <style>   
       *{
           margin: 0;
           padding: 0;
       }
       li{
           list-style: none;
       }
       #wrap{
           width: 430px;
           margin: 20px auto;
       }
       .list h3{
           font: normal 20px/50px "微软雅黑";
           width: 430px;
           height: 50px;
           background-color: #FEDAB8;
       }
       .list h3 > img{
            width: 12px;
            height: 12px;
            padding-left: 8px;
       }
       .list > ul{
           display: none;
       } 
       .list > ul > li{
           line-height: 30px;
       }
      
    </style>
</head>
<body>
    <!-- 1.布局 -->
    <ul id="wrap">
        <li class="list">
            <h3><img src="./images/ico1.gif" alt=""> 朋友</h3>
            <ul>
                <li>进击的企鹅</li>
                <li>又见一帘幽梦</li>
                <li>梦回大唐</li>
            </ul>
        </li>
        <li class="list">
            <h3><img src="./images/ico1.gif" alt=""> 家人</h3>
            <ul>
                <li>外公</li>
                <li>父亲</li>       
                <li>表哥</li>
            </ul>
        </li>
        <li class="list">
            <h3><img src="./images/ico1.gif" alt=""> 陌生人</h3>
            <ul>
                <li>中国移动</li>
                <li>多伦多地产经纪</li>
                <li>娅娅</li>
            </ul>
        </li>
    </ul>

    <script>
        /* 
            描述: 滑入每一个h3标签, 将h3后面的ul>li标签显示出来
         */
        //  2.1 获取盒子wrap, 元素h3, ul, img
        var wrap = document.getElementById('wrap');
        // 通过父元素来获取子元素
        var h3 = wrap.getElementsByTagName('h3');
        var ul = wrap.getElementsByTagName('ul');
        var img = wrap.getElementsByTagName('img');
        console.log(wrap, h3, ul, img);

        // 2.2 给每一个h3添加划入事件
        for(var i = 0; i < h3.length; i++){
            // 自定义索引记录下此时i的值
            h3[i].index = i;
            // 获取此时h内的img元素
            // 添加点击事件
            h3[i].onclick = function(){
                // 激活此时点击的h3和 ul
                if(this.className == ''){
                    // 打印出此时的自定义索引值
                    console.log(this.index);
                    // 将对应的ul显示出来
                    ul[this.index].style.display = 'block';
                    // 改变小图标
                    img[this.index].src = './images/ico2.gif';
                    // 将h3设为激活状态
                    this.className = 'active';
                }else{
                    // 不激活 h3, 则隐藏ul
                    ul[this.index].style.display = 'none';
                    // 改变小图标
                    img[this.index].src = './images/ico1.gif';
                    // 取消active设置
                    this.className = '';
                }
            }
        }
    </script>
</body>
</html>

夹心776655

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【Javascript】入门之QQ列表的实现

描述: 点击朋友/家人/陌生人, 显示/收起对应列表代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QQ列表</title> <.
复制链接

扫一扫

专栏目录