手风琴案例

<!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. GNU make doc - 函数总结

    $(value variable) 使用variable未展开状态的值 FOO = $(PATH) all: $(warning $(FOO)) $(warning $(value FOO)) #ou ...

  2. KMP算法Next()函数的一个应用

    转载:http://www.cnblogs.com/vongang/archive/2012/05/04/2483419.html 记一个KMP算法的应用,经典的KMP算法详解还是看这里 问题:给一个 ...

  3. codewars--js--Valid Braces--正则、键值数组

    问题描述: Write a function that takes a string of braces, and determines if the order of the braces is v ...

  4. Android埋点方案的简单实现-AOP之AspectJ

    个人博客 http://www.milovetingting.cn Android埋点方案的简单实现-AOP之AspectJ AOP的定义 AOP为Aspect Oriented Programmin ...

  5. 疫情之下,使用FRP实现内网穿透,远程连接公司电脑进行办公

    当前情况下,经常会有需要到公司电脑进行一些操作,比如连接内网OA,数据库或者提交文档.为了减少外出,将使用frp进行内网穿透的方法进行一个说明. 前提条件 1. 一台拥有公网 IP 的设备(如果没有, ...

  6. Elasticsearch必知必会的干货知识一：ES索引文档的CRUD

    ​ 若在传统DBMS 关系型数据库中查询海量数据,特别是模糊查询,一般我们都是使用like %查询的值%,但这样会导致无法应用索引,从而形成全表扫描效率低下,即使是在有索引的字段精确值查找,面对海量数 ...

  7. Mac 下如何快速重启 Dock 栏？

    两种方法. 如果Dock栏出现了问题或是没有反应,请打开Launchpad并按下Command+D键. 这样就可以关闭Dock栏并重启它,效果和经常用到的killall Dock命令相同.

  8. 在NBA我需要翻译 适配器模式

    17.1 在NBA我需要翻译! 17.2 适配器模式 Adapter,将一个类的接口转换成客户希望的另外一个接口,Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作, 有些国家 ...

  9. JVM第二篇 类加载子系统

    1.内存结构概述 简图 ​ 详细 ​ ​ ​ 2.类加载器与类加载的过程 ​ 类加载器子系统负责从文件系统或者网络中加载Class文件,class文件在文件开头有特定的文件标识[CA FE BA BY ...

  10. HTML指定页面编码

    HTML指定页面编码 <meta charset="UTF-8" />