<!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. .net reflector 的缺陷

    .net reflector是一个反编译DLL的工具,在安装后如果电脑上有VS也会同时安装到VS里面,但是他是收费的,虽然反编译的效果很好,但是运行VS2013时(或许其他版本也有这样的问题)如果项目 ...

  2. 【BZOJ1064】[NOI2008] 假面舞会（图上DFS）

    点此看题面 大致题意:有\(k\)种面具(\(k\)是一个未知数且\(k≥3\),每种面具可能有多个),已知戴第\(i\)种面具的人能看到第\(i+1\)种面具上的编号,特殊的,戴第\(k\)种面具的 ...

  3. 2018.6.1 oracle数据库乱码问题

    执行select * from v$controlfile;为什么结果是未选定行? 显示连接了但是select * from dba_data_files; 显示中文乱码: shutdown star ...

  4. python_49_三种编程方式及面向过程与面向函数区别.py

    ''' 三种编程方式:1.面向对象 (类:class)2.面向过程 (过程:def)3.函数式编程(函数:def) 编程语言中函数的定义:函数是逻辑结构化和过程化的一种编程方法 过程与函数的区别,过程 ...

  5. 外网访问FTP服务，解决只能以POST模式访问Filezilla的问题

    在内网可以正常使用PASV,但是在外网不行,导致数据传输慢或者根本连接不了,在FlashFXP中通过日志,找到了解决方法解决方法1.在Filezilla——Edit——Settings——Passiv ...

  6. 题解 P4613 【[COCI2017-2018#5] Olivander】

    话说这道题,作为一个哈迷,是不能错过的 我很惊讶本蒟蒻竟然看得懂题面 好了,闲话少说,这道题,虽说是入门难度,但凭着良心说,它还是一道普及 - 的吧 看到标签,“高性能”,大脑的第一反应是快读. 是不 ...

  7. 小波变换（wavelet transform）的通俗解释（一）

    小波变换 小波,一个神奇的波,可长可短可胖可瘦(伸缩平移),当去学习小波的时候,第一个首先要做的就是回顾傅立叶变换(又回来了,唉),因为他们都是频率变换的方法,而傅立叶变换是最入门的,也是最先了解的, ...

  8. Vuex的简单了解

    vuex的官网了解:https://vuex.vuejs.org/zh/guide/ 一.什么是vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所 ...

  9. sigqueue与kill详解及实例

    /*********************************************************************************************** 相关函 ...

  10. LOJ#6342. 跳一跳(期望)

    题意 $n \leqslant 10^5$ Sol 随便推一推就好了吧.. $f[i] = \frac{f[i] + f[i +1] + \dots f[n]}{n - i + 1} + 1$ 移一下 ...