手风琴案例

<!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. rfc文档

    你会看到很多网上关于标准的rfc文档. 如何阅读rfc 文档. https://juejin.im/post/5bf1948ff265da61553a6c97 从一个普通的RFC文档上升到Intern ...

  2. UnsupportedClassVersionError ： 不支持的类版本错误

    UnsupportedClassVersionError : 不支持的类版本错误 listenerStart配置类的应用程序侦听器时出错 listenerStart Error configuring ...

  3. ModbusTCP协议解析 —— 利用Wireshark对报文逐字节进行解析详细解析Modbus所含功能码

    现在网上有很多类似的文章.其实这一篇也借鉴了很多其他博主的文章. 写这篇文章的重点是在于解析功能和报文.对Modbus这个协议并不会做很多介绍. 好了,我们开始吧. 常用的功能码其实也没多少.我也就按 ...

  4. centos7安装postgresql和postgis

    1.安装步骤 -- 安装对应的rpm文件(其他系统的rpm包,请自行到https://yum.postgresql.org/下载)yum install -y https://download.pos ...

  5. 11种常用css样式之background学习

    background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的backgroun ...

  6. Linux分区工具-parted

    parted用于操纵磁盘分区的程序,通常用于规则大小超过2T的分区,也可用于小分区的规划:它支持多种分区表格式,包括MS-DOS(MBR)和GPT:这对于为新操作系统创建空间,重新组织磁盘使用以及将数 ...

  7. 【Java】模拟登录教务网并获取数据

    本文章仅做技术交流演示学习,请勿用于违法操作! 前期准备 首先我们需要到要模拟登录的网页,进行抓包操作. 使用Chrome浏览器打开系统的登录页面,按F12打开开发者工具 切换到Network选项卡 ...

  8. Lucene之分析器

    什么是分析器? 分析(Analysis)在Lucene中指的是将域(Field)文本转换为最基本的索引表示单元—项(Term)的过程. 分析器(Analyzer)对分析操作进行了封装,通过执行一系列操 ...

  9. 为什么我用Ipad Pro做电子笔记和看PDF电子书

    为什么我用Ipad Pro做电子笔记和看PDF电子书 Ipad做笔记的优点: 1.ipad整理的笔记可以随时修改,可以看PDF的书,2.纸质书很重携带不便3.ipad的可通过关键词搜索笔记内容 4.笔 ...

  10. youtube使用youtube-dl下载挂代理的方法

    youtube-dl.exe --no-check-certificate --proxy=127.0.0.1:1080 --external-downloader=aria2c --external ...