<!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. iOS开发学习之大牛们的博客

    http://blog.csdn.net/iosbird/article/details/51981023 唐巧:http://blog.devtang.com/blog/archives/ 王巍:h ...

  2. pandas 常用统计方法

    统计方法 pandas 对象有一些统计方法.它们大部分都属于约简和汇总统计,用于从 Series 中提取单个值,或从 DataFrame 的行或列中提取一个 Series. 比如 DataFrame. ...

  3. java基础编程——用两个栈来实现一个队列

    题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 题目代码 /** * <分析>: * 入队:将元素进栈A * 出队:判断栈B是否为空, * ...

  4. 后台调用前台js

    WEB后台代码调用前台JS(两种方式). 1   这种方式只能调用简单的JS代码.不能调用自定义的函数. string jss = "<script language='javascr ...

  5. 关于后台获取不到HiddenField值的有关问题

    服务器加载aspx程序时,首先要执行后台cs文件中的page_load等方法中的代码,其它按钮事件等是不执行的,生成页面发送到客户端.客户端执行时会响应js脚本,提交到服务器后除了执行page_loa ...

  6. arr.forEach()与for...in的用法举例

    1.forEach() 将给定的数字转换成罗马数字. 所有返回的 罗马数字 都应该是大写形式. function convert(num) { var str = ""; var ...

  7. 去除myeclipse中doget和dopost方法中的注释

    当我们使用myeclipse新建servlet时发现doget和dopost方法中有一些无用的注释,每次新建一个servlet时都要手动删除特别麻烦. 下面就教大家如何去除这些注释! 以myeclip ...

  8. 循环引用问题 -- dealloc方法不执行

    dealloc不执行 如果一个类在释放过后,dealloc方法没有执行,那么就代表着这个类还被其他对象所引用,引用计数不为0,这样就造成了内存泄露 昨天其他业务线开发告知他所依赖的我这边的父类VC的- ...

  9. Sum All Primes-freecodecamp算法题目

    Sum All Primes 1.要求 求小于等于给定数值的质数之和. 只有 1 和它本身两个约数的数叫质数.例如,2 是质数,因为它只能被 1 和 2 整除.1 不是质数,因为它只能被自身整除. 2 ...

  10. pthread_cancel函数注意事项

    /************************************************** 相关函数: #include <pthread.h> int pthread_can ...