手风琴案例

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head lang="en">
  5.   <meta charset="UTF-8">
  6.   <title></title>
  7.   <style type="text/css">
  8.     * {
  9.       padding: 0;
  10.       margin: 0;
  11.     }
  12.  
  13.     ul {
  14.       list-style-type: none;
  15.     }
  16.  
  17.     .parentWrap {
  18.       width: 200px;
  19.       text-align: center;
  20.  
  21.     }
  22.  
  23.     .menuGroup {
  24.       border: 1px solid #999;
  25.       background-color: #e0ecff;
  26.     }
  27.  
  28.     .groupTitle {
  29.       display: block;
  30.       height: 20px;
  31.       line-height: 20px;
  32.       font-size: 16px;
  33.       border-bottom: 1px solid #ccc;
  34.       cursor: pointer;
  35.     }
  36.  
  37.     .menuGroup>div {
  38.       height: 200px;
  39.       background-color: #fff;
  40.       display: none;
  41.     }
  42.   </style>
  43.  
  44.   <script src="jquery-1.12.4.js"></script>
  45.   <script>
  46.  
  47.     $(function () {
  48.       //思路分析：给所有的span注册点击事件，让当前span的兄弟div显示出来
  49.       $(".groupTitle").click(function () {
  50.         //链式编程：在jQuery里面，方法可以一直调用下去。
  51.         $(this).next().slideDown(500).parent().siblings().children("div").slideUp(500);
  52.       });
  53.     })
  54.   </script>
  55. </head>
  56.  
  57. <body>
  58.   <ul class="parentWrap">
  59.     <li class="menuGroup">
  60.       <span class="groupTitle">标题1</span>
  61.       <div>我是弹出来的div1</div>
  62.     </li>
  63.     <li class="menuGroup">
  64.       <span class="groupTitle">标题2</span>
  65.       <div>我是弹出来的div2</div>
  66.     </li>
  67.     <li class="menuGroup">
  68.       <span class="groupTitle">标题3</span>
  69.       <div>我是弹出来的div3</div>
  70.     </li>
  71.     <li class="menuGroup">
  72.       <span class="groupTitle">标题4</span>
  73.       <div>我是弹出来的div4</div>
  74.     </li>
  75.   </ul>
  76. </body>
  77.  
  78. </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. getElementsByName和getElementById获取控件

    js对控件的操作通常使用getElementsByName或getElementById来获取不同的控件进行操作 getElementsByName() 得到的是一个array, 不能直接设value ...

  2. Linux运维--15.OpenStack vm使用keepalived 实现负载均衡

    外接mariadb集群 实现负载均衡 实验环境 10.0.1.27 galera1 10.0.1.6 galera2 10.0.1.23 galera3 10.0.1.17 harpoxy1 hapr ...

  3. MySQL 什么是索引？

    该文为< MySQL 实战 45 讲>的学习笔记,感谢查看,如有错误,欢迎指正 一.索引简介 索引就类似书本的目录,作用就是方便我们更加快速的查找到想要的数据. 索引的实现方式比较多,常见 ...

  4. 2020数据字典php-直接复制

    [2020数据字典php-直接复制] <?php /** * 生成mysql数据字典 */ header ( "Content-type: text/html; charset=utf ...

  5. include 和require 区别

    include和require的区别  1.include() 包含文件 2.include_once(filename)如果已经包含,则不再执行include_once 3.requirerequi ...

  6. JSP开发机票预定系统 源码

    开发环境: Windows操作系统开发工具:MyEclipse+Jdk+Tomcat6+Mysql数据库 运行效果图 源码及原文链接:https://javadao.xyz/forum.php?mod ...

  7. JavaScript对象模型概念

    1.对象的概念 JavaScript只有函数对象才有类的概念,因此创建一个对象,必须使用函数对象.(ES6中可以直接声明一个class,实质上也是一个函数对象). 函数对象的内部有[[Construc ...

  8. Openshift V3系列各组件版本

    Openshift V3.* 系列各组件版本 Components 3.0 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.9 3.10 3.11 Core Components dock ...

  9. 39.Python模板结构优化-引入模板include标签、模板继承使用详解

    在进行模板的构造时,不免有些模板的部分样式会相同,如果每一个模板都是重写代码的话,不仅在做的时候麻烦,而且在后期的维护上,也是相当的麻烦.所以我们可以将模板结构进行优化,优化可以通过:引入模板:模板继 ...

  10. c#XML的基本使用

    创建XML文档 static void Main(string[] args) { //1.引入命名空间 //2.创建XML文档对象 XmlDocument xmldoc = new XmlDocum ...