<!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. MySQL 常用字段类型，介绍及其建表使用方法经验分享

    由于工作的公司没有专业的DBA又经常需要建立各种各种的表来满足自己的业务逻辑,所以经常查看MySQL 手册或者谷歌查看相关资料,所以本人就根据我的工作经验和相关资料来介绍一下MySQL各种字段类型及其 ...

  2. javascript写的新闻滚动代码

    在企业站中,我们会看到很多新闻列表很平滑的滚动,但是这种功能自己写太浪费时间,下面是我整理好的一组很常用的新闻列表滚动,有上下分页哦! 1.body里面 <div class="tz_ ...

  3. 利用matlab实现以下功能：将一个正整数分解质因数。例如：输入90,打印出90=2*3*3*5。

    程序思路: 对n进行分解质因数,应先找到一个最小的质数k,从2开始,然后按下述步骤完成: (1)如果这个质数恰等于n,则说明分解质因数的过程已经结束,打印出即可. (2)如果n不等于k,则应打印出k的 ...

  4. mysql 执行reset master 风险

    reset master 会把mysql实例上的所以二进制日志删除,并且日志序列从1开始:这样会引起两个问题. 001.问题一 slave 由于找不到下一个要执行的事件所以会报错.进一步master- ...

  5. ubuntu14.04 安装搜狗输入法

    (1)下载链接 http://pinyin.sogou.com/linux/ (2)清除fcitx $sudo apt-get purge fcitx* (3)使用deb安装工具gdebi,这个工具能 ...

  6. POI3.10 根据Excel模版导出数据测试

    1:所需jar包 2:Mysql数据库表内容如下: 3:代码结构如下: (1)User.java public class User { private int id; private String ...

  7. Windows7里的“计算器”你真的会用吗？

    “计算器”是不同Windows版本中的必备工具,虽然功能单一,但的确是人们日常工作中不可缺少的辅助工具,本文就来谈谈它的使用. 一.标准型和科学型两种面板 我们既可从Windows附件菜单中启动它,也 ...

  8. JavaScriptSerializer类 对象序列化为JSON，JSON反序列化为对象

    JavaScriptSerializer 类由异步通信层内部使用,用于序列化和反序列化在浏览器和 Web 服务器之间传递的数据.说白了就是能够直接将一个C#对象传送到前台页面成为javascript对 ...

  9. java生成json字符串的方法

    例1:将map对象添加一次元素(包括字符串对.数组),转换成json对象一次. 代码: package com.json; //这是使用org.json的程序: import java.util.Ha ...

  10. SQL数据转移

    方法一:如果想把数据库A中的表Table1中的数据复制到数据库B中的表Table2中,也就是要预先建立Table2,可以使用一下语句: use B goinsert into Table2 selec ...