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 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
随机推荐
- Android中GridView、ListView 的 getChildAt() 方法返回null 问题
开发的Android app用到了GridView或者ListView,通常使用getChildAt(int position)方法获取当前点击或者选中的View(即position对应的View). ...
- linux 移除svn文件夹
find . -name .svn -type d -exec rm -fr {} \;
- 【转】Informix数据表结构分析资料整理之约束查询代码
原文地址:http://blog.csdn.net/xqf222/article/details/6271219 本文主要整理了Informix数据库相关系统表数据,已分析整个Informix数据表结 ...
- delphi中nil、null、UnAssigned区别
nil:空指针,空地址,对象也是指针,所以可以object := nil;null:null是一个未定义值的变量,既不是0也不代表空字符串,它是未定义的.http://www.delphibasics ...
- NYOJ-915 +-字符串（贪心）
+-字符串 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描述 Shiva得到了两个只有加号和减号的字符串,字串长度相同.Shiva一次可以把一个加号和它相邻的减号交换. ...
- arguments对象，caller 和 callee
arguments对象是比较特别的一个对象,arguments非常类似Array,但实际上又不是一个Array实例. 它指的是函数对象里的参数,且只能在函数内部使用. 使用 检测函数的参数个数,引用属 ...
- elasticsearch 批量插入
将下面数据写入requests { "create": { "_index": "index1", "_type": & ...
- JavaScript（9）——call与apply
call与apply call和apply方法可以通过函数名称来调用函数.有两个参数 call()方法与apply()方法的作用相同,他们的区别仅在于接收参数的方式不同. [call] 调用一个对象的 ...
- HDU2544-最短路(最短路模版题目)
Problem Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要 ...
- java本地方法
一. 什么是Native Method 简单地讲,一个Native Method就是一个java调用非java代码的接口.一个Native Method是这样一个java的方法:该方法的实现由非j ...