<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        * {padding: ;margin: ;}

        ul { list-style-type: none;}

        .parentWrap {

            width: 200px;

            text-align:center;

        }

        .menuGroup {

            border:1px solid #;

            background-color:#e0ecff;

        }

        .groupTitle {

            display:block;

            height:20px;

            line-height:20px;

            font-size: 16px;

            border-bottom:1px solid #ccc;

            cursor:pointer;

        }

        .menuGroup > div {

            height: 200px;

            background-color:#fff;

            display:none;

        }

    </style>

    <script src="jquery-1.11.1.min.js"></script>

    <script>

        $(function () {

            //需求：鼠标点击span，让他下面的div显示出来。让其他的div隐藏。

            $(".parentWrap span").click(function () {

//                $(this).next().show();

//                //让其他的隐藏

//                //点击的span的父亲li，的所有的兄弟元素li，的孩子元素div全部隐藏。

//                $(this).parent("li").siblings("li").children("div").hide();

                //连式编程

                $(this).next().show().parent("li").siblings("li").find("div").hide();

            });

        })

    </script>

</head>

<body>

<ul class="parentWrap">

    <li class="menuGroup">

        <span class="groupTitle">标题1</span>

        <div>我是弹出来的div1</div>

    </li>

    <li class="menuGroup">

        <span class="groupTitle">标题2</span>

        <div>我是弹出来的div2</div>

    </li>

    <li class="menuGroup">

        <span class="groupTitle">标题3</span>

        <div>我是弹出来的div3</div>

    </li>

    <li class="menuGroup">

        <span class="groupTitle">标题4</span>

        <div>我是弹出来的div4</div>

    </li>

</ul>

</body>

</html>

jquery版手风琴效果的更多相关文章

  1. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  2. jquery横向手风琴效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  4. jquery横向手风琴效果2

    <!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...

  5. jquery实现手风琴效果

    html----accordion.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. jQuery做出手风琴效果

    今天学到JQuery中的遍历-siblings,便手痒做了个手风琴的动态效果,有一点收获,分享给大家.mouseout的时候一定要记得opacity必须设置,不然li的opacity会保持mousem ...

  7. Jquery版放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  9. jQuery插件实例四：手风琴效果[无动画版]

    手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...

随机推荐

  1. 这些年，在wp平台打拼的日子

    最近经常胃疼,在当地的镇医院看了几次都没有改善,只好去市医院照胃镜检查,发现有胃炎,虽然是很普通和常见的毛病,但这种毛病一但沾上,就很难根治,一喝酒或者吃饭不定时.熬夜.吃酸辣冷冻等食物都容易引起复发 ...

  2. centos 通用开发工具及库安装 有了它不用愁了

    通用开发工具及库:# yum groupinstall "Development Tools" "Development Libraries"

  3. imfilter()用法

    功能:对图像进行滤波. 用法: g = imfilter(f, w, filtering_mode, boundary_options, size_options) 其中,f:输入图像,w:滤波掩模, ...

  4. 关于请求时状态为cancel

    项目中发现有一个问题,在我发送某些请求的时候请求一会状态就变为cancel了,我滴个乖乖,这是咋回事,被取消了,后来经过仔细排查后发现了以下两个问题 1.AJAX和form表单同时使用,(form提交 ...

  5. 基于纹理内存的CUDA热传导模拟

    原文链接 项目中有三个,第一个是全局内存,其余两个分别是基于1d和2d纹理内存.项目打包下载. 纹理内存是只读内存,与常量内存相同的是,纹理内存也缓存在芯片中,因此某些情况下,它能减少对内存的请求并提 ...

  6. C语言字符，字符串，字节操作常用函数

    strlen 这个函数是在 string.h 的头文件中定义的 它的函数原型是 size_t strlen( const char ); size_t 是一个无符号整型,是这样定义的 typedef ...

  7. JS中的引用、浅拷贝和深拷贝

    js的深拷贝浅拷贝是很常遇到的问题,一直模模糊糊有点说不过去,所以这次好好总结一下. 1.js的引用 JS分为基础类型和引用类型两种数据类型: 基础类型:number.string.boolean.n ...

  8. 图片url转base64

    var xhr = new XMLHttpRequest() // 配置的代理,解决跨域问题 xhr.open('GET', url.replace('http://xxx.com', '/img') ...

  9. 洛谷P3371单源最短路径SPFA算法

    SPFA同样是一种基于贪心的算法,看过之前一篇blog的读者应该可以发现,SPFA和堆优化版的Dijkstra如此的相似,没错,但SPFA有一优点是Dijkstra没有的,就是它可以处理负边的情况. ...

  10. shell 流水账

    在shell脚本运行时,会先查找系统环境变量ENV,该变量指定了环境文件(加载顺序通常是/etc/profile ~/.bash_profile ~/.bashrc /etc/bashrc) 设置全局 ...