<!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的收缩的更多相关文章

  1. Jquery点击除了指定div元素其他地方，隐藏该div

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...

  2. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  3. jquery 点击空白处隐藏div元素

    <style type="text/css">.pop {display:none;width: 200px;height: 130px;background: #08 ...

  4. jQuery点击按钮实现div的隐藏和显示切换效果

    <script type="text/javascript"> $(function(){ $('#click_event').click(function(){  i ...

  5. jquery如何实现点击标题收缩下面的内容

    jquery如何实现点击标题收缩下面的内容 一.总结 一句话总结:怎么做复杂前端任务,先把样式(最简单)做出来,然后在写js. 1.如何取jquery集合中的某个索引号的元素? 不是get(),是eq ...

  6. Jquery点击div之外的地方隐藏当前div

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  7. [转]JQuery控制div外点击隐藏，div内点击不会隐藏

    一直弄清楚这个效果如何实现,看了这篇博客的几行代码原来如此简单,就是利用了事件冒泡而已. 比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: $(& ...

  8. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

  9. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

随机推荐

  1. HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）

    上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...

  2. 转载 --iOS实用小技巧(2)-生成txt文本

    //不论是创建还是写入只需调用此段代码即可 如果文件未创建 会进行创建操作 - (void)writeToFileWithTxt:(NSString *)string{ dispatch_async( ...

  3. PostgreSQL的.NET驱动程序Npgsql中参数对象的一个Bug

    最近将公司的项目从SqlServer移植到PostgreSQL数据库上来,在调用数据库的存储过程(自定义函数)的时候,发现一个奇怪的问题,老是报函数无法找到. 先看一个PgSQL存储过程: CREAT ...

  4. aar

    aar是一个类似于jar的文件格式.但是他们之间是有区别的.jar:仅仅包含class和清单文件,没有资源文件.aar:包含了class文件和资源文件.说白了就是Android的专属“jar” 将代码 ...

  5. std::unique_lock

    /*与Mutex RAII相关,方便线程上锁,相比std::lock_guard提供了更好的上锁解锁控制,反正我是没看出来也是在构造时上锁,在析构时解锁,感觉和lock_gurad大差不差都是在线程函 ...

  6. 此类目的是防治序列化Json字符串时的循环引用问题-------最好解决方案

    http://james.newtonking.com/json/help/index.html using Newtonsoft.Json;using System;using System.Col ...

  7. 【BZOJ2616】SPOJ PERIODNI 笛卡尔树+树形DP

    [BZOJ2616]SPOJ PERIODNI Description Input 第1行包括两个正整数N,K,表示了棋盘的列数和放的车数. 第2行包含N个正整数,表示了棋盘每列的高度. Output ...

  8. nginx排错error while loading shared libraries:libpcre.so.1:cannot open shared object file:No such file or directory

    启动nginx报错:error while loading shared libraries:libpcre.so.1:cannot open shared object file:No such f ...

  9. Docker修改时区

    简介 docker容器打日志时间滞后8小时 方法 启动时修改时区 Docker修改默认时区 已启动的容器修改时区 进入容器docker exec -i -t [CONTAINNER] /bin/bas ...

  10. ie8兼容：对象不支持“trim”属性或方法

    trim() 方法是原生js中去空格的方法,高版本浏览器已经默认支持trim() 方法,但ie8以下不支持,会报错:对象不支持“trim”属性或方法 解决这个的兼容,只需要扩展String原型属性 在 ...