<!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. PCA人脸识别

    人脸数据来自http://www.cl.cam.ac.uk/research/dtg/attarchive/facedatabase.html 实现代码和效果如下.由于图片数量有限(40*10),将原 ...

  2. 最大化 AIX 上的 Java 性能，第 1 部分: 基础

    http://www.ibm.com/developerworks/cn/aix/library/es-Javaperf/es-Javaperf1.html 最大化 AIX 上的 Java 性能,第 ...

  3. CorelDRAW 实现蒙版效果的方法

    CorelDRAW能够实现很多意想不到的小效果,其中包括了位图图像软件的处理功能,蒙版效果就是其中的一项.作为矢量图形处理软件,从理论上讲它并不具备蒙板技术,然而只是我们平常没有用到而已,利用图框精确 ...

  4. 【转】关于B/S架构应用程序的权限设置分析和总结

    来自:http://www.cnblogs.com/zhouxunyu/p/3790122.html 分析:不同的用户登录到系统后赋予不同的操作权限,而用户存在于数据库中,标识用户权限的字段也保存在数 ...

  5. AngularJS 的安全Apply

    $scope.safeApply = function(fn) {     var phase = this.$root.$$phase;     if (phase == ‘$apply‘ || p ...

  6. xml学习笔记二（规则）

    XML 的语法规则很简单,且很有逻辑.这些规则很容易学习,也很容易使用. 所有 XML 元素都须有关闭标签 在 HTML,经常会看到没有关闭标签的元素: <p>This is a para ...

  7. nginx 一般网站部署常用参数设置

    #user nobody;worker_processes 2; #error_log logs/error.log;#error_log logs/error.log notice;#error_l ...

  8. C语言qsort函数用法

    qsort函数简介 排序方法有很多种:选择排序,冒泡排序,归并排序,快速排序等. 看名字都知道快速排序是目前公认的一种比较好的排序算法.因为他速度很快,所以系统也在库里实现这个算法,便于我们的使用. ...

  9. 每日学习心得：SQL查询表的行列转换/小计/统计（with rollup，with cube，pivot解析）

    2013-8-20 1.    SQL查询表的行列转换/小计/统计(with  rollup,with cube,pivot解析) 在实际的项目开发中有很多项目都会有报表模块,今天就通过一个小的SQL ...

  10. Java-Lambda

    1. 函数式接口 函数式接口可以包含多个默认方法.类方法,但是只能有一个抽象方法. Lambda表达式的目标类型是函数式接口. java.util.function包下,定义了大量的函数式接口 2. ...