<!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. 采用PHP函数uniqid生成一个唯一的ID

    http://www.daimajiayuan.com/sitejs-17815-1.html

  2. 如何用Transformer+从PDF文档编辑数据

    ABBYY PDF Transformer+是一款可创建.编辑.添加注释及将PDF文件转换为其他可编辑格式的通用工具,可使用该软件从PDF文档编辑机密信息,然后再发布它们,文本和图像均可编辑,本文将为 ...

  3. shell脚本实例-游戏脚本

    http://bbs.chinaunix.net/thread-3580033-1-1.html shell游戏收集贴 #!/bin/bash # Tetris Game #APP declarati ...

  4. python3倒叙字符串

    google测试工程师的一道题: 设计一个函数,使用任意语言,完成以下功能: 一个句子,将句子中的单词全部倒排过来,但单词的字母顺序不变.比如,This is a real world,输出结果为 w ...

  5. android数据存储之SharedPreferences

    一.SharedPreferences简介      (1)SharedPreferences是Android平台上一个轻量级的存储类,用来保存应用的一些常用配置,比如Activity状态,Activ ...

  6. SQL Server 2008维护计划 出错 无法实现自动备份

    ,MaintenancePlan.Subplan_1,错误,0,HBZGQ\TESTSQLSERVER,MaintenancePlan.Subplan_1,(作业结果),,该作业失败. 用户 sa 调 ...

  7. UI-导航控制器的使用

    1.初始化导航栏控制器 2..设置导航栏的标题 3.跳到下一个页面 4.返回上一个页面 5.自定义返回页面 6.导航栏上的自定义返回按钮 7.两个导航栏显示隐藏的常用方法(当前页不显示)

  8. HackerRank "Minimum Average Waiting Time" !

    Something to learn: http://blog.csdn.net/yuwenshi/article/details/36666453 Shortest Job First Algori ...

  9. 【MySQL】原理 之 事务

    1.MySQL逻辑架构大致分为:连接认证层,核心服务层,存储引擎层. 2.锁策略,需要在开销和数据的安全性之间寻求平衡,这种平衡会影响到性能. 3.写锁优先于读锁. 4.行级锁只在存储引擎层实现,而M ...

  10. Android的CursorLoader用法小结

    工作内容集中到Contact模块,这个应用查询数据的地方很多,其使用了CursorLoader这个工具大大简化了代码复杂度.Android自3.0提供了Loader机制,当时google的API只是简 ...