jquery实现QQ列表功能

超、凢脫俗 2022-09-14 09:10 175阅读 0赞

**css:**

<style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            div {
                width: 200px;
                margin: 20px auto;
            }
    
            h3 {
                background: pink;
                padding: 20px;
                box-sizing: border-box;
            }
    
            ul {
                padding-left: 20px;
                display: none;
            }
    
            .active {
                display: block;
            }
        </style>

**html:**

<div>
            <h3>朋友</h3>
            <ul>
                <li>熊大</li>
                <li>熊二</li>
                <li>光头强</li>
                <li>吉吉</li>
                <li>蹦蹦</li>
            </ul>
            <h3>同事</h3>
            <ul>
                <li>熊大</li>
                <li>熊二</li>
                <li>光头强</li>
                <li>吉吉</li>
                <li>蹦蹦</li>
            </ul>
            <h3>黑名单</h3>
            <ul>
                <li>熊大</li>
                <li>熊二</li>
                <li>光头强</li>
                <li>吉吉</li>
                <li>蹦蹦</li>
            </ul>
        </div>

**javascript:**

//jquery官网：https://www.bootcdn.cn/jquery/ 
    <script src="./js/jquery.js"></script>
        <script>
            // 点击h3找到相邻的下一个兄弟 显示或者隐藏 toggleClass
            $('h3').click(function () {
                console.log($(this).next());
                $(this).next().toggleClass('active');
            });
        </script>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_19_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/390993f58cfd42709b93726bfd83aabc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/299d503d8a17454c93785688691ce96d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/811c117de8e140aaa763195c3dd3f6db.png

发表评论取消回复

表情：

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

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

相关阅读

相关 JS 实现列表移动（JQuery实现）

JS 实现列表移动学习内容：需求总结：学习内容：需求用 JS 实现列表移动 ![在这里插入图片描述][waterma

我不是女神ヾ/ 2022年10月16日 10:29/ 0 赞/ 140 阅读

相关 jquery实现QQ列表功能

css: <style> { margin: 0; padding: 0;

超、凢脫俗/ 2022年09月14日 09:10/ 0 赞/ 176 阅读

相关 JQuery实现Ajax功能

使用jquery实现ajax功能的示例代码如下： $.ajax({ url:"/WebCrowd/servlet/Aj

谁践踏了优雅/ 2022年07月12日 02:41/ 0 赞/ 221 阅读

相关微信朋友圈，QQ空间，微博等列表展示的功能实现

内容摘要该控件能够应用于内容资讯展示的功能模块中，如：腾讯和新浪微博的微博列表，微信朋友圈及其它社交类应用的好友动态展示列表等；实现了类似腾讯微博的微博列表展示功能，包

本是古典何须时尚/ 2022年06月16日 13:28/ 0 赞/ 258 阅读

相关网站实现QQ登陆功能

一、Introduction 一般网站具有使用qq登陆到本站的功能。二、实现步骤 1. 网站在外网且有外网域名也就是网站上线。首先，注册一个域名。

矫情吗；*/ 2022年06月02日 12:20/ 0 赞/ 266 阅读

相关用jquery实现动态列表

html： //工单表 <table id="tcdSalesTable" style="position: absolute;top:10px;left:10%;">

我就是我/ 2022年05月25日 11:41/ 0 赞/ 376 阅读

相关计划列表功能实现

效果图如下： ![70][] 描述：右侧的图标是可以根据你自己的需要换的哦小原点的实现原理：使用伪类，核心css代码 li:first-of-type h2:

忘是亡心i/ 2022年05月16日 14:07/ 0 赞/ 211 阅读

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

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

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

相关 android 实现QQ好友列表

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

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

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

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

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