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 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
随机推荐
- 浙大 pat 1023题解
1023. Have Fun with Numbers (20) 时间限制 400 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue ...
- MySQL字符串类型
VARCHAR类型用于存储变长字符串,它会删除末尾的所有空格,它比定长字符串更省空间,因为它仅使用必要的空间(越短的字符串占用越少),VARCHAR会用1或2个额外字节记录字符串长度(如果字符串长度不 ...
- lua中获取时间
os.date() 返回 XX/XX/XX XX:XX:XX 月/日/年 时:分:秒 os.time() 返回的是从1970年1月1日到现在的经过的秒数. 例如: print(os. ...
- WildMagic 简单图元(一)
#include <Wm5WindowApplication3.h> #include <Wm5VisualEffectInstance.h> using namespace ...
- HDU 1372 Knight Moves(BFS)
题目链接 Problem Description A friend of you is doing research on the Traveling Knight Problem (TKP) whe ...
- 关于socket客户端接收不定长数据的解决方案
#!/usr/bin/env python3.5 # -*-coding:utf8-*- """ 本实例客户端用于不断接收不定长数据,存储到变量res "&qu ...
- 获取android源码中遇到的问题
最近项目相当紧张,回家之后还需要继续研究android源码. 从网上找了一些资料,下载过程中还是遇到了很多问题.这里罗列一下: 1. 下载Repo过程中提示证书问题: curl https://dl- ...
- kvstore之memcached为存储介质
ecstore中kvstore选用memcached作为存储介质 kvstore存储类选用base_kvstore_memcached(app/base/lib/kvstore/memcached.p ...
- RegOpenKey(注册表定位器) 1.5 中文免费绿色版
软件名称: RegOpenKey(注册表定位器) 1.5 中文免费绿色版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win7 / Vista / Win2003 / WinXP / Wi ...
- ural 1261. Tips（进制运算）
1261. Tips Time limit: 1.0 secondMemory limit: 64 MB The favorite resting place of the Ural programm ...