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 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
随机推荐
- CF 602C The Two Routes（dij+邻接矩阵）
(￣▽￣)" #include<iostream> #include<cstdio> #include<cmath> #include<algori ...
- C程序浅议
文件FILE是程序设计中的一个重要概念.所谓“文件”一般是指存储在外部介质上的数据的集合.操作系统是以文件为单位对数据进行管理的,而文件是以文件名为标识的.操作系统对文件实行“按名存取”. C语言把文 ...
- 原生态 php连接mysql
<?php$host = 'localhost';$user = 'root';$pass = '';$dbname = 'test';$con = mysql_connect($host,$u ...
- 四、WCF的配置文件
注:本文为学习摘抄,原文地址:http://www.cnblogs.com/iamlilinfeng/archive/2012/10/02/2710224.html 一.概述 配置也是WCF编程中的主 ...
- 关于逆波兰式的c++实现
正常的表达式 逆波兰表达式 a+b ---> a,b,+ a+(b-c) ---> a,b,c,-,+ a+(b-c)*d ---> a,b,c,-,d,*,+ a+d*(b-c)- ...
- vultr vps2016年免费升级流量和cpu
拥有超高性价比的vultr vps在2016年第一天宣布全面升级vps产品: 悉尼.东京机房vps全部免费升级到北美和欧洲机房相同流量.这就意味着,东京机房vps流量,以1024 MB内存的套餐为例, ...
- redhat 时区修改
修改系统时区,发现只需要一个命令就可以解决 修改之前: cp /usr/share/zoneinfo/Asia/Chongqing /etc/localtime 修改之后:
- 如何用脚本快速修改IP地址(Netsh)
如何用脚本快速修改IP地址(Netsh) 如果通过Windows的网络属性修改Ip/网关,真是太麻烦了.最近一个项目经常要切换ip,所以我写了两个脚本:c:\116.bat netsh interfa ...
- 基于PXE的Centos无人值守安装（Win平台）
一.环境准备 PXE服务器端 1.工具 tftpd32 (下载)用于提供DHCP和ftp服务 hfs (下载) 用于提供安装软件的http方式下载 Kickstart ...
- 10- python 网络爬虫分析
Python 网络爬虫简单分析 import urllib2 response = urllib2.urlopen("http://www.baidu.com") print re ...