jQuery---手风琴案例
手风琴案例
<!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---手风琴案例的更多相关文章
- bootstrap-简洁实用的jQuery手风琴插件
前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...
- 一款点击图片进行无限循环的jquery手风琴特效
一款点击图片进行无限循环的jquery手风琴特效,点击手风琴折合点,可以无限循环的点击下去,很炫酷的手风琴哟! 还有每张图片的文字介绍,因为兼容IE6所以找来分享给大家这个jquery特效. 适用浏览 ...
- jQuery手风琴广告展示插件
效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...
- jQuery手风琴菜单！！！！
jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...
- jQuery手风琴制作
jQuery手风琴制作 说起手风琴,想必大家应该都知道吧,简单的来说就是可以来回收缩的这么一个东西,接下来,我就给大家演示一下用jQuery制作一个手风琴菜单! 写jQuery前,我们需要引用一个jQ ...
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- jQuery手风琴的制作！！
jQuery手风琴的制作 首先我们先来做一个简单的jQuery的效果图 效果图 如下: css代码 如下: <style type="text/css" media=&quo ...
- jQuery常见案例
jQuery常见案例 通过jQuery实现全选,反选取消: 选择 地址 端口 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> ...
- Jquery 分页案例
Jquery 分页案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
- jQuery实际案例③——手风琴的效果
如图,用最简单的方式实现手风琴的效果,核心,就是通过改变自身即鼠标移上去的那张图的width,与其他的width就可,但是需要用animate,先改变自己的width,再改变其他的.
随机推荐
- linux中的正则表达式知识梳理
1. 正则表达式 1.1 正则表达式使用 正则表达式是开发者为了处理大量的字符串和文本而定义的一套规则和方法,使用正则表达式可以提高效率,快速获取想要的内容. 正则表达式常用于linux三剑客grep ...
- mitmproxy--Cannot establish TLS with client (sni: e.crashlytics.com): TlsException("(-1, 'Unexpected EOF')",) 解决办法
按崔哥(https://cuiqingcai.com/5391.html)的安装步骤一步步下来,会报这个错误: Cannot establish TLS with client (sni: e.cra ...
- JMeter接口测试-循环读取库的用户信息
前言 如何实现循环读取数据库的用户信息,并传递到下一个登录请求呢,下面我们一起来学习吧!在之前我们已经学会了利用JMeter连接数据库了,具体操作可以看我之前的随笔JMeter接口测试-JDBC测试 ...
- Python3标准库：functools管理函数的工具
1. functools管理函数的工具 functools模块提供了一些工具来调整或扩展函数和其他callable对象,从而不必完全重写. 1.1 修饰符 functools模块提供的主要工具就是pa ...
- spark 报错 InvalidClassException: no valid constructor
2019-03-19 02:50:24 WARN TaskSetManager:66 - Lost task 1.0 in stage 0.0 (TID 1, 1.2.3.4, executor 1) ...
- npm常用命令和脚手架使用
最近前端同学使用最多的莫过于vue,angualr,react等热门前端框架了.那么就避免不掉的使用npm命令,本人就经常因为这三个脚手架的使用而不得不百度相应的npm命令,不胜其烦,,,因此就整理一 ...
- 从零开始一个个人博客 by asp.net core and angular（一)
这是一个个人叙述自己建设博客的帖子,既然是第一篇那肯定是不牵扯代码了,主要讲一下大体的东西,微软最新的web框架应该就数asp.net core 3.1了这是一个长期支持版,而且是跨平台又开源版本,所 ...
- 4.python流程控制语句介绍
流程控制语句分类 1).顺序结构 2).判断结构 3).循环结构 判断结构 特点:如果 ... 否则 ... 格式一: ① if 条件表 ...
- centos7添加网卡
centos7添加桥接网卡 1.使用ip a 命令查看是否有新加的网卡 如上图新网卡为ens36,默认分配ip为192.168.3.14 2. 使用nmcli conn 命令查看新网卡的uuid 3. ...
- day16 匿名函数
# 匿名函数# 函数名 = lambda 参数1,(参数2,....) : 返回值 [注意:匿名函数不允许换行]# 匿名函数返回值和正常函数一样可以是任意数据类型# def add(x,y):# re ...