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 ...
随机推荐
- Linux/UNIX 定时任务 cron 详解
定时任务( job)被用于安排那些需要被周期性执行的命令.利用它,你可以配置某些命令或者脚本,让它们在某个设定的时间内周期性地运行.cron 是 Linux 或者类 Unix 系统中最为实用的工具之一 ...
- IPsec 学习笔记
工作中需要,参考网上的资料对IPSecVPN进行学习,并通过博客记录下一些知识点作为学习记录和后续复习的材料. Transport Layer (TLS) 其中主要参考了以下文档: http://ww ...
- centos忘记root密码，重新设置的方法
今天重新装了一个centos6.6,好像root密码没有叫我设置吧,然后用虚拟机开始安装之前的密码登录显示失败,所以有了下面的彩蛋.....Helloween... 在虚拟机安装了Centos,今天要 ...
- 快捷键&小技巧&备忘录
shift+鼠标滚轮:实现左右移动 alt+鼠标左键双击:打开属性 chrome中在F12下的Element中,可以先选中某一项,可以直接按住F2进行编辑 chrome中element的右下方我们可以 ...
- window.location.href的用法
在写ASP.Net程序的时候,我们经常遇到跳转页面的问题,我们经常使用Response.Redirect 做ASP.NET框架页跳转,如果客户要在跳转的时候使用提示,这个就不灵光了,如: Respon ...
- PCA 主成分分析（Principal components analysis ）
问题 1. 比如拿到一个汽车的样本,里面既有以“千米/每小时”度量的最大速度特征,也有“英里/小时”的最大速度特征,显然这两个特征有一个多余. 2. 拿到一个数学系的本科生期末考试成绩单,里面有三列, ...
- nginx常用命令
ps -ef | grep nginx在进程列表里面找master进程,它的编号就是主进程号了. 步骤2:发送信号 从容停止Nginx: kill -QUIT 主进程号 快速停止Nginx: kill ...
- PHP无限分类分类导航LINK的代码
<?php function getCatePath($cid,&$result=array()){ include("conn.php"); $sql=" ...
- ----------jqery和js如何判断checkbox是否选中 --------两个单选按钮如何选一个，且用jquery获取被选的值
jqery和js如何判断checkbox是否选中 jquery: <div id="divId" class="divTable"> <div ...
- 10月21上午PHP基础
新建的php文件必须要放在wamp安装目录下的www文件夹里.如果拿到别的地方,php无法运行,将显示错误. <?php?> //嵌入php的方式 <?php //嵌入php方式的开 ...