<!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. 【wikioi】3160 最长公共子串（后缀自动机）

    http://codevs.cn/problem/3160/ sam的裸题...(之前写了spoj上另一题sam的题目,但是spoj被卡评测现在还没评测完QAQ打算写那题题解时再来详细介绍sam的.. ...

  2. C语言0长度数组（柔性数组）

    0长度数组,又称为柔性数组(flexible array).通经常使用来实现变长数组.常见于TLV(type-length-value)的数据结构中. 在标准 C 和 C++ 中,不同意用 0 长度数 ...

  3. MTP（Media Transfer Protocol（媒体传输协议））简介

    ---恢复内容开始--- 1,简单说明 MTP,微软公司规定的新的传输规则(字面本来应该是协议的,但是自己感觉更像是规则,制定了基本上的所有路线,剩下的是你想怎么选择罢了,使用者完全没有可能在它的框架 ...

  4. JAVA 并发编程-多个线程之间共享数据（六）

    多线程共享数据的方式: 1.假设每一个线程运行的代码同样.能够使用同一个Runnable对象,这个Runnable对象中有那个共享数据,比如,卖票系统就能够这么做. 2,假设每一个线程运行的代码不同. ...

  5. Hibernate_day02--Hibernate的一级缓存

    Hibernate的一级缓存 什么是缓存 1 数据存到数据库里面,数据库本身是文件系统,使用流方式操作文件效率不是很高. (1)把数据存到内存里面,不需要使用流方式,可以直接读取内存中数据 (2)把数 ...

  6. IOS模拟器

    IOS模拟器 目录 概述 实用操作 概述 实用操作 快速删除大量程序的方式 菜单栏 -> Reset Contain And Settings 或者:直接删除模拟器应用里面的想要去除的应用程序的 ...

  7. 如何激励用户为你的app评分？

    如何激励用户为你的app评分? 2014-04-10 16:21 编辑: suiling 分类:营销推广 来源:CocoaChina  0 7247 应用设计应用评分 招聘信息: IOS兼职 深圳创业 ...

  8. quartz 防止上一任务未执行完毕，下一时间点重复执行

    /** * 订单监控类 * 定时扫描所有待付款订单,超时自动取消 * Created by huangbaidong * 2017/3/29. */ @Component public class O ...

  9. 一文彻底解决Ubuntu上PHP的安装以及版本切换

    Ubuntu上官方的源,比如 Ubuntu14.04 默认源中的是 PHP5.6.x.Ubuntu16.04 默认源中的是 PHP7.0.x,那么如果想在 Ubuntu16.04 上安装 PHP7.1 ...

  10. 第九课——redis集群

    第九课时作业 静哥 by 2016.4.18~2016.4.25 1.节点 (1)节点概念:一个节点就是redis集群里的一台redis服务器.一个redis集群是由多个节点(node)组成,最初每个 ...