<!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. UVA Live Archive 4490 Help Bubu（状压dp）

    难点在于状态设计,从左向右一本书一本书的考虑,每本书的决策有两种拿走或者留下, 对于拿走后的书,之后要放回,但是决策过程中不知道到往哪里放, 虽然前面的书的种类确定,可能是往后面放更优,而后面的书的类 ...

  2. 初学HBase的几个问题

    转自 http://itindex.net/detail/50571-hbase-%E9%97%AE%E9%A2%98 本文主要针对对HBase不了解的人.主要想基于个人的理解回答以下几个问题: 什么 ...

  3. python_51_函数返回值1

    def test1(): '只执行return以前的' print('test1返回值为0 ') return 0 print('这句不会被执行的') x=test1() print(x)#值为0 d ...

  4. 解决Jquery中使用each循环时，循环外的js依旧会执行

    今天在改项目bug时,发现一个问题,我获取一个div中所有的input,并取值时,判断某一条件,但是循环外的js依然可以执行. $(".tab-reg-next input").e ...

  5. RabbitMQ使用教程（五）如何保证队列里的消息99.99%被消费？

    1. 前情回顾 RabbitMQ使用教程(一)RabbitMQ环境安装配置及Hello World示例 RabbitMQ使用教程(二)RabbitMQ用户管理,角色管理及权限设置 RabbitMQ使用 ...

  6. AngularJS 字符串

    AngularJS字符串就像是JavaScript字符串 <!DOCTYPE html><html><head><meta http-equiv=" ...

  7. Win 无法安装 python 包

    Win 上使用 pip install 安装出错 使用 wheel 安装 pip install wheel 下载 编译包 http://www.lfd.uci.edu/~gohlke/pythonl ...

  8. 2.在Cisco Packet Tracer里交换机默认网关的配置（实现跨网段telnet)

    我们将在此拓扑图的基础上进行实验 大多命令都可用tab键位来补齐 1.分别给pc机设置好ip地址 pc2为:192.168.1.1 pc3为:192.168.2.1 两台计算机处在不同的网段之中 2. ...

  9. Node.js 中流操作实践

    本文节选自 Node.js CheatSheet | Node.js 语法基础.框架使用与实践技巧,也可以阅读 JavaScript CheatSheet 或者 现代 Web 开发基础与工程实践 了解 ...

  10. 关于PHPExcel导出Excel时身份证,数字会导出为科学计数的处理方法

    上次在开发一个项目时,用到PHPExcel导出数据,其中有导出身份证等长串数字时导出的Excel中显示为科学计数方式. 这种显示很不人性化而且量多了修改起来也很麻烦. 这是因为Excel处理数字里默认 ...