<!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. POI导入

    public void import(){ XSSFWorkbook wb = new XSSFWorkbook(new File("filePath")); XSSFSheet ...

  2. Unity Meshes

    1. Unity 没有自带建模工具 2. 导入 Mesh 时,Unity 会自动寻找所引用的纹理,查找文件夹名为 Textures 的.先在本目录下找 -> 上溯在parent查找 ==> ...

  3. 8000401a 错误 ,检索 COM 类工厂中 CLSID 为 的组件时失败，原因是出现以下错误: 8000401a。

    "/"应用程序中的服务器错误. -------------------------------------------------------------------------- ...

  4. 输入的不是有效的 Base-64 字符串，因为它包含非 Base-64 字符、两个以上的填充字符，或者填充字符间包含非法字符

    正常URL: http://localhost:16990/GoodsOrder/OrderRevoke.aspx??6G5lFi6xuoiLDhfOOOIkBYwy8RGpkfuza2gLlJrlT ...

  5. sql server ,OVER(PARTITION BY)函数用法,开窗函数,over子句,over开窗函数

    https://technet.microsoft.com/zh-cn/library/ms189461(v=sql.105).aspx https://social.msdn.microsoft.c ...

  6. postfix

    http://www.postfix.org/ All programmers are optimists -- Frederick P. Brooks, Jr. 所有程序员都是乐天派

  7. unity, ugui input field

    ugui Input Field,获取输入的字符串. 错误方法: string content=inputField.FindChild("Text").text; 这样得到的是输 ...

  8. OpenJudge计算概论-短信计费

    /*===================================== 短信计费 总时间限制: 1000ms 内存限制: 65536kB 描述 用手机发短信,一般一条短信资费为0.1元,但限定 ...

  9. 【redis】 linux 下redis 集群环境搭建

    Redis集群 (要让集群正常工作至少需要3个主节点,在这里我们要创建6个redis节点,其中三个为主节点,三个为从节点,对应的redis节点的ip和端口对应关系如下) 127.0.0.1:63791 ...

  10. 面向对象设计模式--观察者模式(Observer)

    要点: 1.如何使用观察者模式: 对应使用这个模式的用户(main)来说,subject和observer这两个基类是不被关系的,在调用者(main)中只是有concreteSubject和concr ...