<!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. PHP __autoload函数知识点

    __autoload函数主要是用来包含不存在的类文件,当初始化的类不存在的时候 存在一个文件名为footer.php的文件,里面有个footer类 class footer{ public funct ...

  2. 创建ListView的基本步骤

    参考<疯狂android讲义>第2.5节P94 1.创建一个或者多个ListView <LinearLayout xmlns:android="http://schemas ...

  3. 自己做jQuery插件：将audio5js封装成jQuery语音播放插件

    日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装. 首先先简单介绍一下Audio5js吧. Audio5js是一个能够 ...

  4. NAS4Free 配置BT下载

    NAS4Free 9.3.0.2 开启BT下载功能 Services|BitTorrent 选中右上角的复选框 Peer port 是监听端口,用于接受外部连接,需要在路由器配置该端口到服务器,才能提 ...

  5. joseph-约瑟夫环问题

    约瑟夫环运作如下: 1.一群人围在一起坐成环状(如:N) 2.从某个编号开始报数(如:K) 3.数到某个数(如:M)的时候,此人出列,下一个人重新报数 4.一直循环,直到所有人出列,约瑟夫环结束 关于 ...

  6. Mysql基本类型(五种年日期时间类型)——mysql之二

    转自:<MySQL技术内幕:时间和日期数据类型> http://tech.it168.com/a2012/0904/1393/000001393605_all.shtml

  7. linux下类似Bus Hound的工具

    0推荐在linux大家有时候需要调试usb接口的串口消息,但是没有类似于windows下的bus hound工具,感觉比较痛苦,其实linux内核提供了usbmon这个工具,可以收集串口信息. 1.准 ...

  8. H.264 RTP 封包格式

    H.264 视频 RTP 负载格式 1. 网络抽象层单元类型 (NALU) NALU 头由一个字节组成, 它的语法如下: +---------------+      |0|1|2|3|4|5|6|7 ...

  9. 解决ssh无密码登录不成功的问题

    把ssh设置为无密码登录很简单,只需两步: 1.在本地创建公钥和私钥: ssh-keygen -t rsa 2.然后把公钥上传到远程机器上: ssh-copy-id -i ~/.ssh/id_rsa. ...

  10. 剑指offer-面试题5.从尾到头打印链表

    题目:输入一个链表的头结点,从尾到头反过来打印出每个结点的值. 刚看到这道题的小伙伴可能就会想,这还不简单,将链表反转输出. 但是这种情况破坏了链表的结构. 如果面试官要求不破坏链表结构呢,这时候我们 ...