<!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. ios开发之坐标系转换

    1:坐标系转换最核心的问题就是:比较两个坐标是否包含,或者是重叠等,最主要的问题是先将两个坐标转换到同一个坐标系下再去比较.第一步先确定矩形框在某个view坐标系下的frame(该矩形框是以该view ...

  2. Facial keypoints detection Kaggle 竞赛系列

    3.2# Facial keypoints detection 作者:Stu. Rui QQ: 1026163725 原文链接:http://blog.csdn.net/i_love_home/art ...

  3. 最新国内外可用SVN托管仓库有哪些

    最新国内外可用SVN托管仓库哪些 一.总结 一句话总结:用SVNBucket和SourceForge 二.最新国内外可用SVN托管仓库推荐 这几年很多SVN托管平台都基本不维护或者直接关闭了,我翻遍了 ...

  4. 【b803】传纸条

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行 ...

  5. CEO 系列之一：如何当好创业公司 CEO？（不要用战术的勤奋掩盖战略的懒惰，在创业过程中，最核心问题，就是能把创业情怀变成具体问题。这个问题越具体越好）

    1. 创业公司要先定一个目标,要善于把目标简化, 分解成一个, 一个更具体,更简单的问题2. 针对简单的问题进行聚焦, 做深做强3. 在做的过程中, 把断地推出自己的产品到市场上去试错, 要用事实来证 ...

  6. 使用jsp，tomcat实现用户登录注册留言的代码

    以下jsp中,未使用样式表对网页进行排版和表单的验证(每个jsp的表单填写的时候应该进行空值与空格的验证,防止提交时出错) 所有错误,链接到error.jsp <%@ page language ...

  7. 【bzoj3555】[Ctsc2014]企鹅QQ 简单哈希

    传送门 题目分析 题意即求有多少对字符串只相差一个字符,枚举删除每个字符后的哈希, 看有多少相等即可. 比如有如下字符串:$Sd123$,其中S部分的哈希值为H,删除的是d,则原字符串的哈希值为$$( ...

  8. hadoop 3.x Could not find or load main class org.apache.hadoop.mapreduce.v2.app.MRAppMaster

    启动hdfs后执行share目录中自带的mapreduce程序时报如下错误 找到$HADOOP_HOME/etc/mapred-site.xml,增加以下配置 <property> < ...

  9. FileReader的编码问题

    有一个UTF-8编码的文本文件,用FileReader读取到一个字符串,然后转换字符集:str=new String(str.getBytes(),"UTF-8");结果大部分中文 ...

  10. Java--面试通关要点

    这里,笔者结合自己过往的面试经验,整理了一些核心的知识清单,帮助读者更好地回顾与复习 Java 服务端核心技术.本文会以引出问题为主,后面有时间的话,笔者陆续会抽些重要的知识点进行详细的剖析与解答. ...