<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>bind折叠效果</title>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

<style type="text/css">

    .head{ height: 15px;}

    .content{ display: none; }

    .heightlight{ background: #ff3300;}

</style>

 <script type="text/javascript">

  $(function(){

          /*$("#panel H5.head").bind("click",function(){

              var $content = $(this).next();

              if ($content.is(":visible")) { //如果内容显示

                $content.hide();

              }else{

                  $content.show();

              }

          })*/

              //toggle()方法

              /*$("#panel H5.head").toggle(function(){

                $(this).next().show();

              },function(){

                  $(this).next().hide()

              });

              */

            //toggle()方法显示隐藏   

            /*$("#panel H5.head").toggle(function(){  

                    $(this).next().toggle();

            },function(){

                    $(this).next().toggle();

            })  */

            //高亮加强效果   

            $("#panel H5.head").toggle(function(){

                    $(this).addClass("heightlight");

                    $(this).next().toggle();

            },function(){

                    $(this).removeClass("heightlight");

                    $(this).next().toggle();

            })  

  })

 </script>

</head>

<body>

<div id="panel">

    <H5 class="head">什么是query？</H5>

    <div class="content">

         jquery 解放军阿拉萨了解阿拉放假阿凡；阿大结局侏罗纪

    </div>

</div>

</body>

</html>

jquery-练习-折叠效果的更多相关文章

  1. jquery 展开折叠效果

    仅供参考  图片 jquery.js 自己处理 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...

  2. jQuery文本段落展开和折叠效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  3. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  4. jQuery 文本段落展开和折叠效果

    jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" c ...

  5. 淡入淡出(折叠效果)and点击切换背景图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Vue 实现展开折叠效果

    Vue 实现展开折叠效果 效果参见:https://segmentfault.com/q/1010000011359250/a-1020000011360185 上述链接中,大佬给除了解决方法,再次进 ...

  7. css3折叠效果

    在开发过程中,经常会遇到一些交互效果,今天所联系的便是一个类似折纸的折叠效果,查看效果. 说到折纸,我们先看下图 这是我第一时间想到的大体思路,如果能让这6个面连续的变化角度到0不就可以了吗,运用cs ...

  8. jq菜单折叠效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

随机推荐

  1. [C++程序设计]函数的递归调用

    在调用一个函数的过程中又出现直接或间接地调用 该函数本身,称为函数的递归(recursive)调用. 包含递归调用的函数称为递归函数. 在实现递归时,在时间和空间上的开销比较大 求n! #includ ...

  2. mysql--help不可用

    1.问题描述: 执行help语句时没有得到相应的返回只是提示检查相关表是不是已经加载: mysql> help contents; Nothing found Please check if ' ...

  3. Java 学习 第二篇；面向对象 定义类的简单语法：

    1:基本知识 [public / protected / private] class 类名 { 零个到多个构造器定义; 零个到多个属性; 零个到多个方法; } 其中类中各个成员之间的顺序没有关系,且 ...

  4. Qt中事件分发源代码剖析（一共8个步骤，顺序非常清楚：全局的事件过滤器，再传递给目标对象的事件过滤器，最终传递给目标对象）

    Qt中事件分发源代码剖析 Qt中事件传递顺序: 在一个应该程序中,会进入一个事件循环,接受系统产生的事件,并且进行分发,这些都是在exec中进行的.下面举例说明: 1)首先看看下面一段示例代码: in ...

  5. Eclipse上GIT插件EGIT使用手册ﾧ

    Eclipse上GIT插件EGIT使用手册 一_安装EGIT插件 http://download.eclipse.org/egit/updates/ 或者使用Eclipse Marketplace,搜 ...

  6. 大量客户反映wordpress的网站打开巨慢，经分析发现，这些网站大都使用了google的字体服务，由于最近google的服务已经被大陆屏蔽，所以wordpress的网站打开时，会卡在字体加载上。

     一会你安装完wp,发现打开巨卡的话,看看这个帖子:http://bbs.myhostcn.com/thread-1026-1-1.html最近一段时间,大量客户反映wordpress的网站打开巨慢, ...

  7. OpenWrt for vmware 从openwrt.org下载10.03.1 或是自己下载最新的源码进行编译生成x86 vmdk格式

    1,直接从OpenWrt.org官网下载 http://downloads.openwrt.org/backfire/10.03.1/x86_generic/ 更新OpenWrt在线软件源 opkg ...

  8. xen vhd操作工具source code研读

    推出最新的VHD操作工具VHD-UTIL 实现源码,超强,Ruiy只为学习高手的设计思路

  9. Java语言程序设计(基础篇) 第八章 多维数组

    第八章 多维数组 8.2 二维数组的基础知识 二维数组中的元素通过行和列的下标来访问. 8.2.1 声明二维数组变量并创建二维数组 下面是二维数组的语法: 数据类型[][] 数组名; int[][] ...

  10. PHP MySQL Order By 关键词 之 Order By

    ORDER BY 关键词 ORDER BY 关键词用于对记录集中的数据进行排序. 语法 SELECT column_name(s) FROM table_name ORDER BY column_na ...