<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <style>
        #u1 li{
            margin-bottom:10px;
            background-color:orange;
            font-size:20px;
            font-weight:bolder;
            cursor:pointer;
        }
        #u1 li ul{
            list-style-type:none;
            margin:0;
            padding:0;
        }
        #u1 li ul li{
            background-color:pink;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {

            $('#u1 li ul li').hide();

            $('#u1 li').click(function () {
                $('ul li', $(this)).show(500);
                $('ul li', $(this).siblings('li')).hide(500);
            });
        });
    </script>
</head>
<body>
    <div style="width:200px;height:500px;border:1px solid red">
        <ul id="u1" style="list-style-type:none; margin:0; padding:0; text-align:center;">
            <li>
                幼儿园同学
                <ul>
                    <li>鼻涕虫</li>
                    <li>爱哭鬼</li>
                    <li>张大胆</li>
                </ul>
            </li>
            <li>
                小学同学
                <ul>
                    <li>张三丰</li>
                    <li>张无忌</li>
                    <li>乔布斯</li>
                </ul>
            </li>
            <li>
                初中同学
                <ul>
                    <li>盖茨</li>
                    <li>种哥</li>
                    <li>奥巴马</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

jquery好友面板切换的更多相关文章

  1. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  2. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  4. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  5. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  6. 一款基于jQuery多图切换焦点图插件

    这次要给大家分享的也是一款jQuery图片滑块插件,之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件,比如jQuery左侧Tab切换的图片滑块插件.它的特点是可以同时切换多张图片 ...

  7. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  8. jquery实现图片切换和js实现图片切换

    jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  9. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. MRTG Monitoring with ESXi Hosted Guest Return ‘interface is commented * has no ifSpeed property’

    MRTG Monitoring with ESXi Hosted Guest Return ‘interface is commented * has no ifSpeed property’ Rec ...

  2. iOS开发Block的介绍以及Block的循环引用问题

    1:block的循环引用问题最主要记住两点: 如果[block内部]使用[外部声明的强引用]访问[对象A], 那么[block内部]会自动产生一个[强引用]指向[对象A] 如果[block内部]使用[ ...

  3. BAT实习内推笔试卷（第一场）——个人答案以及分析

    第一题: 给定一个长度不小于2的数组arr. 写一个函数调整arr,使arr中要么全部的偶数位上都是偶数,要么全部的奇数位上都是奇数上. 要求:假设数组长度为N.时间复杂度请达到O(N),额外空间复杂 ...

  4. .Net Core Socket 压力测试

    原文:.Net Core Socket 压力测试 .Net Core Socket 压力测试 想起之前同事说go lang写的push service单机可以到达80万连接,于是就想测试下.Net C ...

  5. 【u028】数列的整除性

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 对于任意一个整数数列,我们可以在每两个整数中间任意放一个符号'+'或'-',这样就可以构成一个表达式, ...

  6. 十年磨一剑 Delphi再写传奇（不争辩，不解释，十年坚持不懈的努力）

    新年伊始,英巴卡迪诺公司(Embarcadero)就在其官网发布了“激动人心的RAD Studio2018年发展规划”公告(见上图).公告中指出,将在于2018年发布10.3.X新版本,新版本兼容Ex ...

  7. nil和Nil和NULL的判断

    ,nil和Nil和NULL的判断 开 发过程中,我们通过http请求,后台返回json数据,而有时数据里某一字段的值为null-,然后我们把此值赋值给 NSArray,NSdictionary,或是N ...

  8. erlang应用发布

    http://blog.csdn.net/zhangxinrun/article/details/6993892 参考“转载1”和“转载2”就可以了,但需要注意以下两点: 1.如果用rebar - c ...

  9. IWXAPI的使用，发布分享和支付

    今天看代码,看到以前项目的微信支付功能,想做一下记录 首先是在application类里面定义 public static IWXAPI MSGAPI; public static final Str ...

  10. mysql 8 远程连接注意事项

    1.首先如果你是在windows平台下连接linux下的mysql 那么请确保linux下的防火墙开放3306端口 vi /etc/sysconfig/iptables在配置文件里增加一行 -A RH ...