<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
body{
  margin:0 auto;
  padding:0;
  width:570px;
  font:75%/120% Arial, Helvetica, sans-serif;
}
a:focus{
  outline:none;
}
#panel{
  background:#69C7F7;
  height:200px;
  display:none;
}
.slide{
  margin:0;
  padding:0;
  border-top:solid 4px #F27613;
}
.btn-slide{
  background:#F27613 url(mytest/jQuery/20121225165932118.gif) no-repeat right -50px;
  text-align:center;
  width:144px;
  height:31px;
  padding:10px 10px 0 0;
  margin:0 auto;
  display:block;
  font:bold 120%/100% Arial, Helvetica, sans-serif;
  color:#fff;
  text-decoration:none;
}
.active{
  background-position:right 12px;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">  
$(document).ready(function(){  
  $(".btn-slide").click(function(){  
    $("#panel").slideToggle("slow");  
    $(this).toggleClass("active");  
    return false;  
  })
})
</script>
</head>
<body>
<div style="display: block;" id="panel"></div>
<p class="slide">
  <a href="javascript:;" class="btn-slide active">点击查看效果</a>
</p>
</body>
</html>

jquery实现的下拉和收缩代码实例的更多相关文章

  1. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

  2. jQuery超酷下拉插件6种效果演示

    原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...

  3. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  4. jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  5. jQuery之双下拉框

    双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理.写了个简单的例子,来说明一下. 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  6. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  7. winform c#绑定combobox下拉框 年度代码。

    winform c#绑定combobox下拉框 年度代码. comboBox1.Items.AddRange("});//邦定数据 comboBox1.Text = DateTime.Now ...

  8. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  9. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

随机推荐

  1. RecyclerView使用完全解析

    http://blog.csdn.net/a396901990/article/details/40153759 Android RecyclerView 使用完全解析 体验艺术般的控件 通过这个控件 ...

  2. gprof使用介绍

    gprof 1.1      简介 gprof实际上只是一个用于读取profile结果文件的工具.gprof采用混合方法来收集程序的统计信息,他使用检测方法,在编译过程中在函数入口处插入计数器用于收集 ...

  3. unity, Graphics.Blit (null, null, mat,0);

    我使用 Graphics.Blit (null, finalRT, mat); 合成出一张finalRT,然后将finalRT用在editor脚本的OnInspector中使用 Graphics.Dr ...

  4. C# 爬虫批量下载文件

    public static void DownFile(string url, string path, string fileName) { HttpWebRequest request = (Ht ...

  5. Java 开发环境搭建

    找到一篇很不錯的Java開發環境搭建的博客, 原文地址為:http://www.cnblogs.com/bribe/p/3377008.html Java 开发环境搭建 一.开发工具获取 1.开发工具 ...

  6. rsync配置中的auth error，一个隐秘的错误

    我们都知道rsync是linux自带的功能强大的文件同步协议. 为了做免密码文件同步,所以,有多种配置.但是种种配置中,可能会遇到一个让人很纠结的问题,那就是安全认证错误的问题! 这个配置,是基于rs ...

  7. 【jmeter】测试报告优化<一>

    具体问题如下: 1.Date report这里的时间没有正确显示出来 2.Summary里的字段Min Time和Max Time显示的是NaN,没有显示正确的时间. 本文主要解决上述两个问题,具体报 ...

  8. 真实赛车3，SPEEDRUSH TV 第3季，第3阶段（第3天），直线加速赛

    与其跳过,不如金币升级引擎和车身.因为后边紧跟一场计时赛.

  9. 剑指offer系列20--从上到下打印二叉树

    * 20 [题目]从上往下打印出二叉树的每个节点,同层节点从左至右打印. * [思路]从根结点开始,先保存结点,再看根结点的左右结点有没有值. * 有,就将左右值放到集合中: * 根节点输出后,打印根 ...

  10. php Xdebug调试

    php开发环境里,安装了xdebug模块后,var_dump()输出的结果将比较易于查看,但默认情况下,var_dump() 输出的结果将有所变化:过多的数组元素不再显示,字符串变量将只显示前N个字符 ...