js实现qq好友分组

Bertha 。 2022-02-02 12:09 376阅读 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 条评论，376人围观）

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

相关阅读

相关 QQ好友分组添加好友（UITableView实现）

- (void)viewDidLoad { [super viewDidLoad]; //malloc开辟内存

绝地灬酷狼/ 2023年10月17日 05:13/ 0 赞/ 24 阅读

相关 Web网页如何实现QQ好友，QQ空间，微博分享

前段时间写了一个个人博客项目，其中博客想做一下可以一键分享给好友，这里做一下整理。 QQ好友，QQ空间，微博分享实现起来都是差不多的，就是请求地址需要改一下，参数基本都是一

た入场券/ 2023年05月29日 06:14/ 0 赞/ 17 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 js实现qq好友分组

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

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

相关 android 实现QQ好友列表

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

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

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

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

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