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 ...
随机推荐
- POJ 3678 Katu Puzzle（强连通 法）
题目链接 题意:给出a, b, c 和操作类型 (与或异或),问是否满足所有的式子 主要是建图: 对于 and , c == 1: 说明 a 和 b都是1,那么 0 就不能取, a' -> a ...
- EasyUI——常见用法总结
1. 使用 data-options 来初始化属性. data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全写 ...
- Tomcat 的 ErrorPage 实现原理分析
使用Tomcat,一定见到过404,500的时候,见到过Tomcat提供的错误页面,例如请求的资源找不到的时候,响应状态码为404,这个时候的错误页面是这样的: 这些错误页面是 如何生成及定位展示的 ...
- javascript序列化
JSON.stringify() JSON.parse() toJSON() var person={"cardId":"546651353435"}; con ...
- Ztree的简单使用和后台交互的写法（二）
针对Ztree的简单使用和后台交互的写法(一)中的树进行改进 1.增加节点的权限 由页面的当前用户,决定树的根节点 然后动态获取树的详细节点: 初始化函数为: function init(){ //初 ...
- Java Web学习笔记-Servle生命周期
Servlet会在服务器启动或第一次请求该Servlet的时候开始生命周期,在服务器停止的时候结束生命周期. 无论请求多少次Servlet,最多只有一个Servlet实例.多个客户端并发请求Servl ...
- 2012 Theory for Forward Rendering
http://miss-cache.blogspot.com/2012/08/lighting-transparent-surfaces-with_26.html http://aras-p.info ...
- Third-person Camera Navigation
http://msdn.microsoft.com/en-us/library/bb203909(v=xnagamestudio.31).aspx http://xbox.create.msdn.co ...
- DIV CSS 网页兼容全搞定 （IE6 IE7 IE8 IE9 火狐 谷歌）
CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...
- input disabled 表单禁用
启用 <input type="> 禁用 <input type=" disabled="">