<!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. LFS，编译自己的Linux系统 - 准备

    概述 现在用的操作系统是Win8.1,用VMware创建一个虚拟机,3G内存(物理内存是6G,分一半),23G硬盘,其中3G用于swap分区,10G用于host system,10G用于建立LFS系统 ...

  2. 做一个正气的杭电人--hdu2500

    做一个正气的杭电人 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  3. opencv中的图像区域复制

    openCV作为已经成熟的开源库,很多操作它都已经有了高效,使用方便的方法.我的应用场景是这样的,从一张大图片中抠出一小部分,然后处理这一小部分后再放到大图像中.对于抠出来可以这样实现: Rect r ...

  4. information_schema.collation_character_set_applicability 学习

    字符集和排序规则之间是不可以随便搭配的.如果你想知道一个字符集它所搭配的排序规则有哪些?那就可以从information_schema.collation_character_set_applicab ...

  5. JS--switch 语句

    说明:js中switch语句的语法风格 function convert(x){ switch(x) { case "string": document.write("s ...

  6. windows平台使用Microsoft Visual C++ Compiler for Python 2.7编译python扩展

    在windows平台上安装python c extension的扩展包是件很痛苦的事情,一般通过安装vc/vs系列来编译C扩展,不过安装包都比较大.或者通过mingw编译,不过有时会在兼容性上出现点问 ...

  7. Discuz!X2.5论坛在IIS和Apache环境配置实现伪静态

    最近在研究自己的网站,然后把这文章分享出来,让不清楚怎么设置的童鞋参考,高手可以飘过~~~ URL 静态化是一个有利于搜索引擎的设置,通过 URL 静态化,达到原来是动态的 PHP 页面转换为静态化的 ...

  8. 利用raspberry pi搭建typecho笔记(二) sqlite和typecho部署

    sqlite概述 typecho可以支持MYSQL和Sqlite两种数据库,因为Sqlite更为轻量,并且不需要额外的进程,而是直接对数据库文件进行读取,所以配置相对于MySQL也更为简单,仅需指定数 ...

  9. linux下JDK,tomcat的安装与环境变量配置

    先从网上下载jdk(jdk-1_5_0_02-linux-i586.rpm) ,下载后放在/home目录中,当然其它地方也行. 进入安装目录#cd /home#cp jdk-1_5_0_02-linu ...

  10. MIT-scheme安装

    下载地址: http://www.gnu.org/software/mit-scheme/ 下载windows版本,安装. The MIT-Scheme can be installed by jus ...