JQuery点击标题实现div的收缩
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery 收缩展开效果</title>
<script src="Scripts/jquery-1.7.1.js"></script>
<style>
/* 收缩展开效果 */
.text
{
line-height: 22px;
padding: 0 6px;
color: #666;
} .box h1
{
padding-left: 10px;
height: 22px;
line-height: 22px;
background: #f1f1f1;
font-weight: bold;
} .box
{
position: relative;
border: 1px solid #e7e7e7;
} h1
{
font-size: 16px;
}
</style>
</head>
<body>
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function () {
$("div.text").hide();//默认隐藏div，或者在样式表中添加.text{display:none}，推荐使用后者
$(".box h1").click(function () {
$(this).next(".text").slideToggle("slow");
})
});
</script>
<!-- 收缩展开效果 -->
<div class="box">
<h1>收缩展开效果</h1>
<div class="text">
1<br />
2<br />
3<br />
4<br />
5<br />
</div>
</div>
<br />
<div class="box">
<h1>收缩展开效果</h1>
<div class="text">
1<br />
2<br />
</div>
</div>
</body>
</html>
JQuery点击标题实现div的收缩的更多相关文章
- Jquery点击除了指定div元素其他地方，隐藏该div
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...
- 锋利的Jquery(点击显示隐藏div)
点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jquery 点击空白处隐藏div元素
<style type="text/css">.pop {display:none;width: 200px;height: 130px;background: #08 ...
- jQuery点击按钮实现div的隐藏和显示切换效果
<script type="text/javascript"> $(function(){ $('#click_event').click(function(){ i ...
- jquery如何实现点击标题收缩下面的内容
jquery如何实现点击标题收缩下面的内容 一.总结 一句话总结:怎么做复杂前端任务,先把样式(最简单)做出来,然后在写js. 1.如何取jquery集合中的某个索引号的元素? 不是get(),是eq ...
- Jquery点击div之外的地方隐藏当前div
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...
- [转]JQuery控制div外点击隐藏，div内点击不会隐藏
一直弄清楚这个效果如何实现,看了这篇博客的几行代码原来如此简单,就是利用了事件冒泡而已. 比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: $(& ...
- jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle
<html><head><meta charset="utf-8"><title></title><script ...
- jquery点击复选框触发事件给input赋值
体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...
随机推荐
- 5.3 SpEL语法
SqEL是一个可以独立于spring的表达式语言,即它可以用在XML中对语法进行简化 5.3 SpEL语法5.3.1 基本表达式一.字面量表达式: SpEL支持的字面量包括:字符串.数字类型(int. ...
- php -- in_array函数
in_array 检查数组中是否存在某个值 说明 bool in_array ( mixed $needle , array $haystack [, bool $strict = FALSE ...
- php如何优化压缩的图片
php程序开发中经常涉及到生成缩略图,利用php生成缩略图这个过程本身没难度,但是你知道php能够优化调节生成的缩略图的质量吗?也就是说php能够控制生成缩略图的清晰度以及生成后的缩略图的体积.下面我 ...
- [转]ODBC编程指南
DM4 ODBC编程指南本章结合DM4数据库的特点,比较全面系统的介绍ODBC的基本概念以及DM4 ODBC DRIVER的使用方法,以便用户更好地使用DM4 ODBC编写应用程序.ODBC提供给你访 ...
- Appium自动化测试3之获取apk包名和launcherActivity后续
接着“Appium自动化测试3之获取apk包名和launcherActivity”章节介绍 测试脚本 1.测试脚本如下: # -*- coding:utf-8 -*- import os, time, ...
- python3----练习题(....)
# 保存文件(文本,图片,视频...) 1 def save_file(): url = 'http://css.8684.cn/citys/images/line/45.jpg' root = r' ...
- 剑指 offer set 14 打印 1 到 N 中 1 的个数
总结 1. 假设 n == 2212, 算法分为两个步骤. 第一步, 将这个 2212 个数分为 1~ 212, 213 ~ 2212 2. 第一部分实际上是将 n 的规模缩小到 212. 假如知道如 ...
- swift开发之--Protocol(协议)
使用object-c语言的同学们肯定对协议都不陌生,但在swift中苹果将protocol这种语法发扬的更加深入和彻底. Swift中的protocol不仅能定义方法还能定义属性,配合extensio ...
- 如何通过Keil将程序正确的下载进flash中
前面介绍了一些创建工程和调试的基本步骤,在这里准备介绍一下如何正确的将Keil程序在仿真调试中下载到flash.这里再次涉及到了debug的窗口. 工具/原料 Keil uVision 4/5 ...
- oracle数据库查询时间sql
select * from cc_picture_info where PICTURE_SOURCE = 3 AND UPLOAD_TIME > to_date('2017-03-29 16:5 ...