手风琴案例

<!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. light oj 1045 - Digits of Factorial K进制下N！的位数

    1045 - Digits of Factorial Factorial of an integer is defined by the following function f(0) = 1 f(n ...

  2. vue.extend 拓展

    https://www.w3cplus.com/vue/vue-extend.html https://jspang.com/post/vue2-2.html https://blog.csdn.ne ...

  3. 浅谈 k8s ingress controller 选型

    大家好,先简单自我介绍下,我叫厉辉,来自腾讯云.业余时间比较喜欢开源,现在是Apache APISIX PPMC.今天我来简单给大家介绍下 K8S Ingress 控制器的选型经验,今天我讲的这些内容 ...

  4. JDK1.8_HashMap源码__构造函数

    HashMap的底层实现是一个Node类型的数组,也就是说使用put(key, value)方法的时候就把key和value根据hashcode值存在table数组相应的下标中,源码如下: /** * ...

  5. MarkdownPad2 安装以及出现的错误（This view has crashed）

    在这里首先感谢 堃堃5love 的解决办法 原文链接:https://blog.csdn.net/kunkun5love/article/details/79495618 声明:写这个是为了以后遇见问 ...

  6. HTTPS原理及流程

    HTTPS为什么更安全:数据对称加密传出,对称密钥使用非对称加密协商. HTTPS就一定安全吗:不一定,如果用户在浏览器端执意访问证书可疑或过期的站点,就存在安全隐患. --- HTTPS实现原理:h ...

  7. UI自动化技术在高德的实践

    一.背景汽车导航作为ToB业务,需要满足不同汽车厂商在功能和风格上体现各自特色的需求.针对这种情况,传统的UI开发方式,基本上是一对一的特别定制.但是这种方式动辄就要500~600人日的工作量投入,成 ...

  8. fancybox图片灯箱功能

    fancybox图片灯箱功能 在页面中引入几个文件 <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery ...

  9. dmock 基于Django的轻量级Mock平台

    GitHub:https://github.com/yjlch1016/dmock # dmock 基于Django的轻量级Mock平台 dmock即Django+Mock的缩写 一.思路: mock ...

  10. css 隐藏滚动条

    如何使用css隐藏滚动条 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置ov ...