<!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. 漫游Kafka设计篇之消息传输的事务定义（5）

    之前讨论了consumer和producer是怎么工作的,现在来讨论一下数据传输方面.数据传输的事务定义通常有以下三种级别: 最多一次: 消息不会被重复发送,最多被传输一次,但也有可能一次不传输. 最 ...

  2. 九度OJ 上剑指 offer 习题目录

    <剑指Offer>面试题集收录汇总 面试题1 赋值运算符函数 不适合在线模式 面试题2 实现Singleton模式 不适合在线模式 面试题3 二维数组中的查找 已收录 面试题4 替换空格 ...

  3. JS-textarea限制输入字数

    解决办法: #descrip 是textarea的id,字数小于40: $("#descrip").on('input',function(event) { if ($(" ...

  4. 【BZOJ2565】最长双回文串 Manacher

    [BZOJ2565]最长双回文串 Description 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为“abc”,逆序为“cba”,不相同).输入长度为 ...

  5. ios sqlite的创建数据库,表,插入查看数据

    iOS sqlite数据库操作.步骤是: 先加入sqlite开发库libsqlite3.dylib, 新建或打开数据库, 创建数据表, 插入数据, 查询数据并打印 1.新建项目sqliteDemo,添 ...

  6. 苹果微信浏览器不能post方式提交数据问题

    form表单中采用post方式提交数据时,在苹果的微信浏览器中无法传递,安卓的可以 如图: 在controller中获取该数据为 null 将表单的提交方式修改为get就能够获取到 现在采用Ajax方 ...

  7. oracle如何用sql查看触发器？

    ORACLE查出表所有的触发器及触发器详细信息 一.查all_triggers表得到trigger_name Sql代码 select trigger_name from all_triggers w ...

  8. linux如何查看某个pid的进程?

    Linux通过PID查看进程完整信息 [root@gsidc-4q-saas23 ~]# netstat -anp|grep 8282tcp 0 0 :::8282 :::* LISTEN 16923 ...

  9. Code Force 21B Intersection

    B. Intersection time limit per test1 second memory limit per test256 megabytes inputstandard input o ...

  10. HDU3306—Another kind of Fibonacci

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3306 题目意思:一个斐波那契数列的变式,本来是A[n]=A[n-1]+A[n-2],现在变成A[n]= ...