JQuery实战手风琴-遁地龙卷风
（-1）写在前面
这个图片是我从网上下载的，向这位前辈致敬。图片资源在我的百度云盘里。http://pan.baidu.com/s/1nvfJHdZ
我用的是chrome49，JQuery3.0，案例并没有考虑浏览器兼容问题，如果你看不到动画效果，尝试给css属性加上前缀。
（1）知识储备
a.class
如果为class标记指定多个值，例如class=”dnf lol” dnf lol是没有先后观念的，等同于class=”lol dnf”，lol中的样式是否能够覆盖dnf中的样式，取决于css样式表中lol是否在dnf后面。不同属性附加。
b.id、 classs
一个元素既有id标记又有class标记，那么相同样式id覆盖class，不同样式附加。
（2）关键思想
元素高度的变化是在原有class A的基础上增加或移除class B实现的，在A和B中使用了transition属性。
（3）源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script type="text/javascript" src="debug-jquery-3.0.0.js"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>为了生活</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
.slider
{
width:700px;
height:32px;
overflow:hidden;
transition:height 150ms linear 0s;
background:#00FF66;
}
.slider p
{
width:700px;
cursor:pointer;
height:32px;
background-image:url("images/newsclosedbg.gif");
}
.big
{
height:200px;
transition:height 150ms linear 0s;
}
</style>
<script type="text/javascript">
$(function()
{
$(".slider p").click(function()
{
var $parent = $(this.parentNode),
target = this;
$parent.toggleClass(function(index,css)
{
if(css.indexOf("big") != -1)
{
target.style.backgroundImage = 'url("images/newsclosedbg.gif")';
}
else
{
target.style.backgroundImage = 'url("images/newsopenbgtop.gif")';
}
return "big"
}).siblings().removeClass(function(index,css)
{
this.children[0].style.backgroundImage = 'url("images/newsclosedbg.gif")';
return "big";
});
}).eq(0).click();
})
</script>
</head
<body>
<div class="slider">
<p></p>
</div>
<div class="slider" >
<p></p>
</div>
<div class="slider" >
<p></p>
</div>
<div class="slider" >
<p></p>
</div>
</body>
</html>
JQuery实战手风琴-遁地龙卷风的更多相关文章
- 如何让JQuery报错-遁地龙卷风
0.解决的问题 a.当选择器语法没有问题,找不到元素时,让jquery报错 b.选择器语法有问题,程序无法继续执行时,让jquery报错 主要针对传递字符串,尝试前请备份jquery库,最好改变名字加 ...
- JQuery选择器细节-遁地龙卷风
1.层次选择器-子元素选择器 <body> <div> <p>lol</p> <div> <p></p> </ ...
- JQuery data方法的使用-遁地龙卷风
(-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...
- JQuery simpleModal插件的使用-遁地龙卷风
(0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simpl ...
- jquery toggle方法使用出错?请看这里-遁地龙卷风
这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function() { alert(1);//1,3,5,7... },function( ...
- 逻辑思维面试题-java后端面试-遁地龙卷风
(-1)写在前面 最近参加了一次面试,对笔试题很感兴趣,就回来百度一下.通过对这些题目的思考让我想起了建模中的关联,感觉这些题如果没接触就是从0到1,考验逻辑思维的话从1到100会更好,并且编程简易模 ...
- jQuery之手风琴图片
<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jquery多级手风琴插件–accordion.js
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...
- 简单jQuery 实现手风琴菜单
简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...
随机推荐
- CDN网络（一）之典型的CND架构与HTTP协议的缓存控制
前言 本人以前在CDN厂商蓝汛就职过一年时间,利用脑子里还残留的一些CDN知识,结合现有的书籍材料,写点东西. what's the CDN CDN(content delivery Network) ...
- apache无法正常启动，80端口被占用的解决方法
apache无法正常启动,80端口被占用的解决方法 网上的方法: 仔细查看提示: make_sock: could not bind to address 0.0.0.0:80 恍然大悟,计算机上安装 ...
- angular 兼容ie7 实现
<script src="~/Content/js/angular.min.js"></script><script src="~/Cont ...
- FCC上的初级算法题
核心提示:FCC的算法题一共16道.跟之前简单到令人发指的基础题目相比,难度是上了一个台阶.主要涉及初步的字符串,数组等运算.仍然属于基础的基础,官方网站给出的建议完成时间为50小时,超出了之前所有非 ...
- C++中dynamic_cas操作符的工作原理
http://stackoverflow.com/questions/13783312/how-does-dynamic-cast-work http://publib.boulder.ibm.com ...
- thinkphp传递参数
php文件输出 U() 跳转地址, echo U('Index/index',array('uid'=>1,'username'=>'wang','time'=>165465121) ...
- iOS监听键盘事件
#pragma mark - view life cycle - (void)viewDidLoad { [super viewDidLoad]; [[NSNotificationCenter def ...
- VS2013-解决error C4996: 'fopen'问题
VS2013中如何解决error C4996: 'fopen'问题 初次使用vs系列编辑器编写控制台应用程序时常出现如下错误: error C4996: 'fopen': This function ...
- MySQL取每组的前N条记录
一.对分组的记录取前N条记录:例子:取前 2条最大(小)的记录 .用子查询: SELECT * FROM right2 a WHERE > (SELECT COUNT(*) FROM right ...
- memcached命令行操作详解，命令选项的详细解释
连接到memcached命令行下: telnet 127.0.0.1 11211 1.set / add / replace : 格式:<command> <key> < ...