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=" ...
随机推荐
- 【BZOJ】1652: [Usaco2006 Feb]Treats for the Cows（dp）
http://www.lydsy.com/JudgeOnline/problem.php?id=1652 dp.. 我们按间隔的时间分状态k,分别为1-n天 那么每对间隔为k的i和j.而我们假设i或者 ...
- bootstrap基础学习二篇
这篇学习网格系统(Grid System) Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1.网格选项: ...
- 数据驱动ddt+excel数据读取
我们可以将测试数据用excel存储,再用ddt去传入,不过我们需要安装对应的库,因为python是无法操作excel的 1.安装第三方库xlrd 2.创建一个excel表格,将需要测试的数据保存 3. ...
- 应用开发之WinForm环境
本章简言 上一章笔者讲到关于IO文件操作类,了解如何处理文件流.从这一章开始笔者将讲解相对比较高级的知识点.而本章笔者就对WinForm开发的知识点进行讲解和引导.现在很多业务都是面向于B/S模式的开 ...
- URL地址传值型多条件搜索JS
function ResetSearchVal(objArray) { var strUrl = location.href; ; i < objArray.length; i++) { var ...
- Android之內置、外置SDCard
From:http://blog.csdn.net/u011290399/article/details/10363881 在项目中,发现通过Android提供的API获取外置SDCard的操作一直不 ...
- 170320、使用快照和AOF将Redis数据持久化到硬盘中
前言 我们知道Redis是一款内存服务器,就算我们对自己的服务器足够的信任,不会出现任何软件或者硬件的故障,但也会有可能出现突然断电等情况,造成Redis服务器中的数据失效.因此,我们需要向传统的关系 ...
- Java中break、continue、return语句的使用区别
break.continue.return之间的区别与联系 在软件开发过程中,逻辑清晰是非常之重要的. 代码的规范也是非常重要的.往往细节决定成败.在编写代码的时候,一定要理解语言的作用以及使用的方法 ...
- poj3735—Training little cats（特殊操作转化为矩阵操作）
题目链接:http://poj.org/problem?id=3735 题目意思: 调教猫咪:有n只饥渴的猫咪,现有一组羞耻连续操作,由k个操作组成,全部选自: 1. g i 给第i只猫咪一颗花生 2 ...
- 【Python算法】归纳、递归、归简
归简法(reduction) 指的是将某一问题转化成另一个问题,将一个未知问题归简成一个已解决的问题. 归纳法(induction) 首先要证明语句在某一基本情况下是成立的,然后证明他可以由一个对象推 ...