js实现qq好友分组

Bertha 。 2022-02-02 12:09 360阅读 0赞

## qq好友分组 ##

<style>
            ul,
            h2 {
                padding: 0;
                margin: 0;
                background-color: wheat;
            }
    
            li {
                list-style: none;
    
            }
    
            #list {
                width: 240px;
                margin: 0 auto;
            }
    
           
    
            #list h2 {
                height: 30px;
                line-height: 30px;
                text-indent: 20px;
                background: url('img/ico1.gif') no-repeat 5px center;
                cursor: pointer;
               
            }
    
            #list .active {
                background: url('img/ico2.gif') no-repeat 5px center;
            }
    
            #list ul {
                display: none;
            }
    
            #list ul li {
                line-height: 24px;
                text-indent: 24px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
        <ul id="list">
            <li class="lis">
                <h2>朋友</h2>
                <ul>
                    <li>张珊珊</li>
                    <li>张珊珊</li>
                    <li>张珊珊</li>
                </ul>
            </li>
            <li class="lis">
                <h2>家人</h2>
                <ul>
                    <li>欧阳州里</li>
                    <li>欧阳州里</li>
                    <li>欧阳州里</li>
    
                </ul>
            </li>
            <li class="lis">
                <h2>陌生人</h2>
                <ul>
                    <li>张珊珊</li>
                    <li>张珊珊</li>
                    <li>张珊珊</li>
    
                </ul>
            </li>
        </ul>
    </body>
    <script type="text/javascript">
        window.onload = function () {
            var list = document.getElementById('list');
            var h2 = list.getElementsByTagName('h2');
            var ul = list.getElementsByTagName('ul');
           
            for (var i = 0; i < h2.length; i++) {
                h2[i].index = i;
                h2[i].onclick = function () {
                    if (this.className == '') {
                        
                        ul[this.index].style.display = 'block';
                        this.className = 'active';
                    } else {
                        ul[this.index].style.display = 'none';
                        this.className = '';
                    }
                }
            }
        }
    
    
    
    
    </script>

效果图  
![在这里插入图片描述][20190511164502228.jpg]

[20190511164502228.jpg]: /images/20220202/240db9a905ae453a91f5a55048516e46.png

发表评论取消回复

表情：

评论列表（有 0 条评论，360人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android之实现QQ好友分组(ExpandableListView)

在项目开发中，也许我们遇到过ListView中嵌套ListView，但谷歌建议我们最好别这样做，因此他们写好了一个ExpandableListView类，他继承ListView

绝地灬酷狼/ 2022年08月19日 12:13/ 0 赞/ 314 阅读

相关 js分享代码(新浪微博,腾讯微博,QQ空间,QQ好友)

[js][]分享代码(新浪微博,腾讯微博,QQ空间,QQ好友) 代码如下: \[html\] view plain copy print ? 1

ゞ浴缸里的玫瑰/ 2022年06月10日 04:23/ 0 赞/ 333 阅读

相关 Android仿QQ好友列表分组实现增删改及持久化

Android仿QQ好友列表分组实现增删改及持久化这篇文章主要介绍了Android仿QQ好友列表分组实现增删改及持久化的相关资料,需要的朋友可以参

本是古典何须时尚/ 2022年06月07日 10:21/ 0 赞/ 393 阅读

相关 jQuery实现QQ分组列表效果

一、实现效果 1.未点击分组标题之前，所有成员都隐藏 2.点击分组标题之后，隐藏的要显示，已经显示的要隐藏 3.在点击一个分组标题时，其他已经展开的分组，要隐藏二、代

雨点打透心脏的1/2处/ 2022年05月09日 19:48/ 0 赞/ 323 阅读

相关 QQ好友列表的实现(QQ9.0版本样式) -- 使用QTreeView

文章结构最终实现效果基本功能代码主要结构 FriendTree类主要工作解析 ItemDelegate类

迷南。/ 2022年03月20日 01:20/ 0 赞/ 723 阅读

相关 Javascript实现 QQ好友列表的展开和隐藏

Javascript实现 QQ好友列表的展开和隐藏你好哇刘岩！最近再看王小波写给李银河的《爱你就像爱生命》，好生羡慕刘银河，有个如此爱她的人，也很羡慕王小波又一个陪他到

素颜马尾好姑娘i/ 2022年03月02日 04:36/ 0 赞/ 294 阅读

相关 js实现qq好友分组

qq好友分组 <style> ul, h2 { padding: 0;

Bertha 。/ 2022年02月02日 12:09/ 0 赞/ 361 阅读

相关 android 实现QQ好友列表

在某些[Android开发][Android]群里，看到有些新手问怎么实现QQ好友列表，其实网上一搜挺多的。接触Android，也才一年的时间，大部分时间花在工作上（解bug。

冷不防/ 2021年12月21日 04:55/ 0 赞/ 404 阅读

相关 Android 实现仿QQ分组实现二级菜单展示

首先展示下要实现的效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

喜欢ヅ旅行/ 2021年11月05日 13:46/ 0 赞/ 341 阅读

相关 android实现QQ空间和QQ好友分享功能

继上一篇文章[android实现微信朋友圈和微信好友分享功能][android]的续章。本章主要讲解如何使用QQ分享功能先看效果，主要讲QQ分享，微信上一章已讲

刺骨的言语ヽ痛彻心扉/ 2021年09月16日 09:34/ 0 赞/ 566 阅读