jquery 展开关闭效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>展开关闭效果</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
bady{font-family:"微软雅黑", "黑体";font-size:12px;}
.nav{ width:400px; overflow:hidden; margin-bottom:8px;}
.nav_tit{background:#000000;height:27px;line-height:27px; width:400px;color:#ffffff;text-align:center; overflow:hidden}
.key{width:50px;float:right;margin:0 0 0 0; cursor:pointer;}
.nav_box{ width:400px; height:200px; background-color:#0066CC;}
</style>
</head> <body> <div class="nav">
<div class="nav_tit"><span class="key">展开</span><span>标题</span></div>
<div class="nav_box">sdfsf</div>
</div> <div class="nav">
<div class="nav_tit"><span class="key">展开</span><span>标题</span></div>
<div class="nav_box">sdfsf</div>
</div> </body>
</html>
<script type="text/javascript">
$(function(){
$(".nav_box").hide();
$(".key").toggle(function(){
$(this).html("关闭");
$(this).parent().parent().find(".nav_box").toggle();
},function(){
$(this).html("展开");
$(this).parent().parent().find(".nav_box").toggle();
});
});
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>展开关闭效果</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
bady{font-family:"微软雅黑", "黑体";font-size:12px;}
.nav{ width:400px; overflow:hidden; margin-bottom:8px;}
.nav_tit{background:#000000;height:27px;line-height:27px; width:400px;color:#ffffff;text-align:center; overflow:hidden}
.key{width:50px;float:right;margin:0 0 0 0; cursor:pointer;}
.nav_box{ width:400px; height:200px; background-color:#0066CC;}
</style>
</head>
<body>
<div class="nav">
<div class="nav_tit"><span class="key">展开</span><span>标题</span></div>
<div class="nav_box">sdfsf</div>
</div>
<div class="nav">
<div class="nav_tit"><span class="key">展开</span><span>标题</span></div>
<div class="nav_box">sdfsf</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
$(".nav_box").hide();
$(".key").toggle(function(){
$(this).html("关闭");
$(this).parent().parent().find(".nav_box").toggle();
},function(){
$(this).html("展开");
$(this).parent().parent().find(".nav_box").toggle();
});
});
</script>
jquery 展开关闭效果的更多相关文章
- jquery 展开折叠效果
仅供参考 图片 jquery.js 自己处理 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
- jQuery操作之效果
jQuery操作之效果 效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置 show(),hide(),toggle() 代码如下: html代码: <p style=& ...
- 第一百七十二节，jQuery，动画效果
jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一．显示.隐藏 jQuery 中显示方法为:. ...
- jQuery拉开关闭帷幕
查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/7.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- jquery 展开折叠菜单
jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...
- JQuery实战---窗口效果
在前面的相关博文中,小编对jquery的相关知识进行了简单的总结,关于jquery的很多小的知识点,都需要我们自己去动手和实践,一行行代码都需要我们自己亲自动手去敲,今天我们继续来学习jquery的相 ...
- Vue 实现展开折叠效果
Vue 实现展开折叠效果 效果参见:https://segmentfault.com/q/1010000011359250/a-1020000011360185 上述链接中,大佬给除了解决方法,再次进 ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
随机推荐
- 《高性能Javascript》读书笔记-4
第四章 算法和流程控制 代码组织结构和解决具体问题的思路是影响代码性能的主要因素 循环处理是最常见的编程模式之一,也是提高性能的关注点之一 循环分四种:标准for循环 ; i < Things. ...
- DD应用实例
1.将本地的/dev/hdb整盘备份到/dev/hdd dd if=/dev/hdb of=/dev/hdd2.将/dev/hdb全盘数据备份到指定路径的image文件dd if=/dev/hdb o ...
- 1、java面试
1.为什么用单例而不用static 答案:首先你要明白static是在什么时候初始化的,其设计意图是什么,单例就是我们运行的当前虚拟机中有且只有一个需要的对象,不存在重复.static是给类静态成员变 ...
- linux下IPC通信
# 管道( pipe ):管道是一种半双工的通信方式,数据只能单向流动,而且只能在具有亲缘关系的进程间使用.进程的亲缘关系通常是指父子进程关系. # 有名管道 (named pipe) : 有名管道也 ...
- HTTPS科普扫盲帖【转】
为什么需要https HTTP是明文传输的,也就意味着,介于发送端.接收端中间的任意节点都可以知道你们传输的内容是什么.这些节点可能是路由器.代理等. 举个最常见的例子,用户登陆.用户输入账号,密码, ...
- 富文本ckediter
##<link rel='stylesheet' href='/css/index.css' /> <script type="text/javascript" ...
- 【分享】bootstrap学习笔记
一.基础知识 1.整体架构 以响应式设计为理念,css组件.js插件+jquery.基础布局组件和12栅格系统搭建. 1.1响应式设计:结合media query查询,适应更多设备,自动适应用户的设备 ...
- Meta标签中的属性及含义
一.Meta标签中的format-detection属性及含义 format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的forma ...
- python多线程，多进程
线程是公用内存,进程内存相互独立 python多线程只能是一个cpu,java可以将多个线程平均分配到其他cpu上 以核为单位,所以GIL(全局锁,保证线程安全,数据被安全读取)最小只能控制一个核,很 ...
- Android任务栈TaskStack
Task:有多个Activity按顺序组成的一个完整的业务逻辑. 任务栈(TaskStack):新增的Activity放入栈中,点击back栈顶Activity从栈中退出. android:nohis ...