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=" ...
随机推荐
- php -- 可变变量
有时候使用可变变量名是很方便的.就是说,一个变量的变量名可以动态的设置和使用.一个普通的变量通过声明来设置,例如: <?php $a = 'hello'; ?> 一个可变变量获取了一个普通 ...
- bootstrap基础学习七篇
bootstrap图片 Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle ...
- Java 执行linux scp 远程获取文件和上传
需要的jar包:ganymed-ssh2-build210.jar import java.io.ByteArrayOutputStream;import java.io.File;import ...
- Struts2_day03--向值栈放数据
向值栈放数据 1 向值栈放数据多种方式 第一种 获取值栈对象,调用值栈对象里面的 set 方法 第二种 获取值栈对象,调用值栈对象里面的 push方法 第三种 在action定义变量,生成变量的ge ...
- Spring学习笔记--使用Spring基于Java的配置
我们需要使用@Component注解来定义一个配置类,在配置类中我们定义Bean: package com.moonlit.myspring; import org.springframework.c ...
- flex布局，input点击软键盘激活，底部按钮上移
安卓手机的问题,原本表单没有超出一屏的时候,上移的现象也是存才的,只是需要滑动body才能看得到,现在,超出一屏了,现象就很明显了 body明显上移: 点击input修改价格: 软键盘出现: 先尝试了 ...
- 【BZOJ4832】[Lydsy2017年4月月赛]抵制克苏恩 概率与期望
[BZOJ4832][Lydsy2017年4月月赛]抵制克苏恩 Description 小Q同学现在沉迷炉石传说不能自拔.他发现一张名为克苏恩的牌很不公平.如果你不玩炉石传说,不必担心,小Q同学会告诉 ...
- Oracle中与日期时间有关的运算函数
1 ADD_MONTHS 格式:ADD_MONTHS(D,N) 说明:返回日期时间D加N月后对应的日期时间.N为正时则表示D之后:N为负时则表示为D之前:N为小数则会自动先删除小 ...
- 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...
- Hibernate中的映射关系（一对多）
在数据库中表和表之间的关系有几种,(一对一,一对多,多对多)一对一关系:可以选择任意一方插入外键(one-to-one:one-to-one<--->many-to-one[unique= ...