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,再改变其他的.
随机推荐
- raid知识梳理及其详细介绍
1 raid级别 生产环境常用到的raid级别有raid0,raid1,raid5,raid10.所以侧重学习这几种raid级别即可. 1.1 raid0条带卷 raid0示意图: raid0特点介绍 ...
- Java8尽管很香，你想过升级到Java11吗？会踩那些坑？
目前最新JDK 11,Oracle会一直维护到2026年. Java11的新特性 1.更新支持到Unicode 10编码 Unicode 10(version 10.0 of the Unicode ...
- Qt Python Scriptable Application
Qt Python Scriptable Application eryar@163.com Abstract. Python and C++ are in many ways as differen ...
- 大数据运维尖刀班 | 集群_监控_CDH_Docker_K8S_两项目_腾讯云服务器
说明:大数据时代,传统运维向大数据运维升级换代很常见,也是个不错的机会.如果想系统学习大数据运维,个人比较推荐通信巨头运维大咖的分享课:https://url.cn/5HIqOOr,主要是实战强.含金 ...
- （数据科学学习手札78）基于geopandas的空间数据分析——基础可视化
本文对应代码和数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 通过前面的文章,我们已经对geopanda ...
- linux之ls目录处理命令
目录处理命令:ls 解释 命令名称:ls 命令英文原意:list 命令所在路径:/bin/ls 执行权限:所有用户 功能描述:显示目录文件 语法 ls 选项[-ald] [文件或目录] -a 显示所有 ...
- 试题 基础练习 Huffuman树
试题 基础练习 Huffuman树 试题 基础练习 Huffuman树 翻了翻网上,基本都是暴力排序.我就提供一个最小堆的写法吧! 点击这里,跳转查看最小堆插入删除函数的简单写法 Talk i ...
- Lucene之查询索引
Query子类 TermQuery:根据域和关键词进行搜索 /** * termQuery根据域和关键词进行搜索 */ @Test public void termQuery() throws IOE ...
- RestTemplate + okhttp 实现远程调用
1. 添加依赖 <!-- https://mvnrepository.com/artifact/com.squareup.okhttp3/okhttp --> <dependency ...
- Oracle修改用户Profile SESSIONS_PER_USER 限制
一.Profile目的: Oracle系统中的profile可以用来对用户所能使用的数据库资源进行限制,使用Create Profile命令创建一个Profile,用它来实现对数据库资源的限制使用,如 ...