<!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. Java设计模式菜鸟系列(十)模板方法模式建模与实现

    转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/39806973 模板方法模式(Template Method):在一个方法中定义了一个算法的 ...

  2. 学习:在Eclipse中用TODO标签管理任务(Task)。

    1.Windows->Perferences->Java->Compile->Task Tags,我们就可以自定义任务标签,Eclipse中可以支持HIgh,Normal,Lo ...

  3. 多线程环境下调用 HttpWebRequest 并发连接限制

    .net 的 HttpWebRequest 或者 WebClient 在多线程情况下存在并发连接限制,这个限制在桌面操作系统如 windows xp , windows  7 下默认是2,在服务器操作 ...

  4. STL 源代码剖析 算法 stl_algo.h -- inplace_merge

    本文为senlie原创.转载请保留此地址:http://blog.csdn.net/zhengsenlie inplace_merge(应用于有序区间) ----------------------- ...

  5. Hibernate_day04--课程安排_Hibernate查询方式_对象导航查询_OID查询

    Hibernate_day04 上节内容 今天内容 Hibernate查询方式 对象导航查询 OID查询 HQL查询 查询所有 条件查询 排序查询 分页查询 投影查询 聚集函数使用 QBC查询 查询所 ...

  6. WPF进阶之接口（4）：ICommand实现详解

    上一章WPF进阶之接口():INotifyPropertyChanged,ICommand中我们遗留了几个问题,我将在本节中做出解释.在详细解释ICommand实现之前,我们现在关注一下什么是:弱引用 ...

  7. tinker

    Ios前一段时间因为热更新被强制下架也算是最大闻了,但Android没关系,继续玩 首先tinker比Andfix好多了,版本现在都到1.7.11了,Andfix不支持yunos, 现在项目中没有用到 ...

  8. Android 防破解技术简介

    Android 防破解技术简介 这几年随着互联网的不断发展,Android App 也越来越多!但是随之而来的问题也越来越多,这其中比较令人头疼的问题就是:有些不法分子利用反编译技术破解 App,修改 ...

  9. LeetCode 笔记系列一 Median of Two Sorted Arrays

    题目:There are two sorted arrays A and B of size m and n respectively. Find the median of the two sort ...

  10. maven打包排除spring-boot内嵌tomcat容器依赖jar

    在pom文件中添加打包排除配置信息. <plugin> <artifactId>maven-war-plugin</artifactId> <version& ...