<!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. 杂文 - 设计MIUI主题 的 MIUI设计师

    设计MIUI主题 的 MIUI设计师 本文地址: http://blog.csdn.net/caroline_wendy 时间: 2014.6.10 By Spike. 1. 首先注冊MIUI设计师: ...

  2. 浅谈AutoResetEvent的用法

    using System;using System.Threading; namespace AutoResetEvent_Examples{    class MyMainClass    {    ...

  3. 使用PHP，jsonp，jquery实现跨域

    html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 写一个SingleTon，（饿最终、懒同步）

    1.饿汉式: public class SingleTon { private SingleTon(){ } private final static SingleTon instance = new ...

  5. Android 调用系统相机拍照保存以及调用系统相册的方法

    系统已经有的东西,如果我们没有新的需求的话,直接调用是最直接的.下面讲讲调用系统相机拍照并保存图片和如何调用系统相册的方法. 首先看看调用系统相机的核心方法: Intent camera = new ...

  6. POI导出EXCEL经典实现（转载）

    1.Apache POI简介 Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程式对Microsoft Office格式档案读和写的功能. .NET的开发人员则 ...

  7. java -jar后台启动

    nohup  java -jar XX.jar >logs.log &

  8. QQ空间的文艺打开方法

    QQ空间被限制?打不开? 看看这里 第一种:http://user.qzone.qq.com/627911903 第二种:http://627911903.qzone.qq.com 第三种:http: ...

  9. 160603、使用pd4ml.jar和ss_css2.jar转pdf的工具类

    注意:需要导入pd4ml.jar和ss_css2.jar import java.awt.Insets;import java.io.BufferedInputStream;import java.i ...

  10. [ Office 365 开发系列 ] 身份认证

    前言 本文完全原创,转载请说明出处,希望对大家有用. 通常我们在开发一个应用时,需要考虑用户身份认证及授权,Office 365使用AAD(Azure Active Directory)作为其认证机构 ...