jquery-练习-折叠效果
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bind折叠效果</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
.head{ height: 15px;}
.content{ display: none; }
.heightlight{ background: #ff3300;}
</style>
<script type="text/javascript">
$(function(){
/*$("#panel H5.head").bind("click",function(){
var $content = $(this).next();
if ($content.is(":visible")) { //如果内容显示
$content.hide();
}else{
$content.show();
}
})*/ //toggle()方法 /*$("#panel H5.head").toggle(function(){
$(this).next().show(); },function(){
$(this).next().hide()
});
*/ //toggle()方法显示隐藏 /*$("#panel H5.head").toggle(function(){ $(this).next().toggle();
},function(){
$(this).next().toggle();
}) */ //高亮加强效果 $("#panel H5.head").toggle(function(){
$(this).addClass("heightlight");
$(this).next().toggle();
},function(){
$(this).removeClass("heightlight");
$(this).next().toggle();
}) })
</script>
</head>
<body>
<div id="panel">
<H5 class="head">什么是query?</H5>
<div class="content">
jquery 解放军阿拉萨了解阿拉放假阿凡;阿大结局侏罗纪
</div>
</div> </body>
</html>
jquery-练习-折叠效果的更多相关文章
- jquery 展开折叠效果
仅供参考 图片 jquery.js 自己处理 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...
- jQuery文本段落展开和折叠效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- jQuery 文本段落展开和折叠效果
jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" c ...
- 淡入淡出(折叠效果)and点击切换背景图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Vue 实现展开折叠效果
Vue 实现展开折叠效果 效果参见:https://segmentfault.com/q/1010000011359250/a-1020000011360185 上述链接中,大佬给除了解决方法,再次进 ...
- css3折叠效果
在开发过程中,经常会遇到一些交互效果,今天所联系的便是一个类似折纸的折叠效果,查看效果. 说到折纸,我们先看下图 这是我第一时间想到的大体思路,如果能让这6个面连续的变化角度到0不就可以了吗,运用cs ...
- jq菜单折叠效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
随机推荐
- 解决mysql中文存储问题
在mysql安装目录下先找到my.ini,给[mysql]和[mysqld]下的default-character-set赋值为utf8 即改为:default-character-set=utf8 ...
- Android 播放gif图片
Android的原生控件并不支持播放GIF格式的图片.我们都知道,在Android中如果想要显示一张图片,可以借助ImageView控件来完成,但是如果将一张GIF图片设置到ImageView里,它只 ...
- py2exe 生成带图标的单个文件实例
随便拉了个学习时用的测试程序来做的实例,原程序如下: #Filename:for.py count=0 for i in range(1,100,2): count+=i else: print 't ...
- 生产环境中CentOS7部署NET Core应用程序
NET Core应用程序部署至生产环境中(CentOS7) 阅读目录 环境说明 准备你的ASP.NET Core应用程序 安装CentOS7 安装.NET Core SDK for CentOS7. ...
- Log4j之properties配置文件详解
Log4j由三个重要的组件构成:日志信息的优先级,日志信息的输出目的地,日志信息的输出格式.日志信息的优先级从高到低有ERROR.WARN. INFO.DEBUG,分别用来指定这条日志信息的重要程度: ...
- C语言经典算法100例
[程序1] 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 1.程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. ...
- mysql服务的注册,启动、停止、注销。 [delphi代码实现]
unit Service; interface uses Windows,Classes,SysUtils,Winsvc,winsock; Type {服务句柄信息} TScmInfo=Record ...
- C# 新特性_协变与逆变 (.net 4.0)
C#4.0中有一个新特性:协变与逆变.可能很多人在开发过程中不常用到,但是深入的了解他们,肯定是有好处的. 协变和逆变体现在泛型的接口和委托上面,也就是对泛型参数的声明,可以声明为协变,或者逆变.什么 ...
- haproxy nginx 多路径
nginx 多路径: location / { root /t/deploy/zjdev/deployedApps/zjzc-web-frontEnd/; index index.html index ...
- 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活
使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果