手风琴案例

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {

      padding: 0;

      margin: 0;

    }

    ul {

      list-style-type: none;

    }

    .parentWrap {

      width: 200px;

      text-align: center;

    }

    .menuGroup {

      border: 1px solid #999;

      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.12.4.js"></script>

  <script>

    $(function () {

      //思路分析：给所有的span注册点击事件，让当前span的兄弟div显示出来

      $(".groupTitle").click(function () {

        //链式编程：在jQuery里面，方法可以一直调用下去。

        $(this).next().slideDown(500).parent().siblings().children("div").slideUp(500);

      });

    })

  </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. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

  2. 一款点击图片进行无限循环的jquery手风琴特效

    一款点击图片进行无限循环的jquery手风琴特效,点击手风琴折合点,可以无限循环的点击下去,很炫酷的手风琴哟! 还有每张图片的文字介绍,因为兼容IE6所以找来分享给大家这个jquery特效. 适用浏览 ...

  3. jQuery手风琴广告展示插件

    效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...

  4. jQuery手风琴菜单！！！！

    jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...

  5. jQuery手风琴制作

    jQuery手风琴制作 说起手风琴,想必大家应该都知道吧,简单的来说就是可以来回收缩的这么一个东西,接下来,我就给大家演示一下用jQuery制作一个手风琴菜单! 写jQuery前,我们需要引用一个jQ ...

  6. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  7. jQuery手风琴的制作！！

    jQuery手风琴的制作 首先我们先来做一个简单的jQuery的效果图 效果图 如下: css代码 如下: <style type="text/css" media=&quo ...

  8. jQuery常见案例

    jQuery常见案例 通过jQuery实现全选,反选取消: 选择 地址 端口 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> ...

  9. Jquery 分页案例

    Jquery    分页案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  10. jQuery实际案例③——手风琴的效果

    如图,用最简单的方式实现手风琴的效果,核心,就是通过改变自身即鼠标移上去的那张图的width,与其他的width就可,但是需要用animate,先改变自己的width,再改变其他的.

随机推荐

  1. vsphere 客户机 使用光驱引导启动

    vsphere上的虚拟服务器 需要用光盘引导启动,用pe系统做维护.   第一部:光盘ios文件 存放的位置 可以直接放光盘 或者将ios文件放到数据存储中 或者将ios文件放到实体主机的存储内   ...

  2. 基于HttpURLConnection的接口调用，支持GET&POST

    单位要做一个多级部署平台,大概意思就是一级系统可以监控下属地域的数据也可管理本地的数据.之前做短信猫用过httpClient请求,与此大同小异.封装了一个两种请求方式的工具类. package com ...

  3. IO流之File对象

    File类: 用来将文件或者文件夹封装成对象 方便对文件与文件夹的属性等信息进行操作(因为流只能操作文件中的数据) File对象可以作为参考传递给流的构造函数 上下级文件夹之间使用分隔符分开: 在Wi ...

  4. Sublime text3的安装以及python开发环境的搭建

    作者:struct_mooc 博客地址:https://www.cnblogs.com/structmooc/p/12376601.html 一. Sublime text3的安装 1.sublime ...

  5. YARN安装和使用

    简介 Yet Another Resource Negotiator ,负责整个集群资源的调度,和管理,支持多框架资源统一调度(HIVE spark flink) 开启yarn 安装hadoop,可以 ...

  6. R语言入门：向量初探

    R语言主要用于统计,因此引入了向量这个概念将更好地进行统计计算,在其他无法引入向量的语言当中则会使用循环来计算一些大规模的数据,在R语言当中则不需要,下面我们来看看R语言当中向量的具体用法吧! 首先, ...

  7. day8 编码2

    #!/usr/bin/env python # -*- coding:utf-8 -*- #str --->byte encode 编码 s = '二哥' b = s.encode('utf-8 ...

  8. P2256 一中校运会之百米跑

    ----------------------- 题目链接:MIKU --------------------- 我现在发现找BUG的最好方法————喝水 喝一次找一个,喝两次A道题 --------- ...

  9. #AcWing系列课程Level-2笔记——3. 整数二分算法

    整数二分算法 编写整数二分,记住下面的思路,代码也就游刃有余了! 1.首先找到数组的中间值,mid=(left+right)>>1,区间[left, right]被划分成[left, mi ...

  10. phpcms v9全站点击量排行代码

    前台: <ul> {pc:content action="sitehits" siteid="1" num="10" order ...