手风琴案例

<!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. [jQuery]顶级对象$(二)

    $ 是 jQuery 的缩写 <script> # 方法1. $ 是jQuery的别称 弹出提示 $(function () { alert(11) ); # 方法2 jQuery(fun ...

  2. js循环小练习

    function fn(){ //打印三角形 for(var i = 1 ; i <= 30 ; i++){ for(var x = 1; x <= i; x++ ){ document. ...

  3. C# 8.0 新特性之二：接口默认实现

    ​      在C#8.0中,针对接口引入了一项新特性,就是可以指定默认实现,方便对已有实现进行扩展,也对面向Android和Swift的Api进行互操作提供了可能性.下面我们来看看该特性的的概念.规 ...

  4. PHP0024：PHP 博客项目开发

  5. 【USACO】JZOJ,Luogu P2690 接苹果 （dp-线性动规）

    同步于CSDN:戳这里QAQ 来源:Luogu P2690,JZOJ 题目描述 很少有人知道奶牛爱吃苹果.农夫约翰的农场上有两棵苹果树(编号为 \(1\) 和 \(2\)), 每一棵树上都长满了苹果. ...

  6. C#方法中的各类参数

    居家隔离的第26天,还在持续的疫情着实让人担忧,看着每天新增的确认人数数字,也在为那些家庭祝福,每当想想那不是一个数字是一条条鲜活的生命时就格外沉重.利用闲在家里的时间巩固C#语言的一个难点.最近在温 ...

  7. c# 读写SerialPort

     SerialDataReceivedEventHandler无反映不要忘记这2属性赋值. serialPort1.DtrEnable = true; serialPort1.RtsEnable = ...

  8. go 环境及4开发

    国内加速 在gopath目录执行 go env -w GOPROXY=direct go env -w GOSUMDB=off go env -w GOPROXY=https://goproxy.io ...

  9. RocketMQ幂等性问题

    什么是幂等性: 在编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同. 当出现消费者对某条消息重复消费的情况时,重复消费的结果与消费一次的结果是相同的,并且多次消费并未对业务系 ...

  10. What is NodeJS(学习过程)

    为什么要学习node.首先是听说了这个和前后端分离有很大的关系.node作为一个基础的技术,需要提前学习.学习node,不打算直接先跟着视频去学习老师们的课程.因为想自己找到一种适合自己的学习方法.之 ...