<!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. Vimdiff---VIM的比较和合并工具

    本文来自IBMDW   http://www.ibm.com/developerworks/cn/linux/l-vimdiff/ 源程序文件(通常是纯文本文件)比较和合并工具一直是软件开发过程中比较 ...

  2. Nanopore sensors for nucleic acid analysis 论文阅读笔记

    Nanopore sensors for nucleic acid analysis Bala Murali Venkatesan and Rashid Bashir 用于核酸分析的纳米孔传感器 纳米 ...

  3. 自然语言处理3.3——使用Unicode进行文字处理

    全世界有多种语言,经常需要应用程序处理不同的语言和字符集.下面将介绍如何利用Unicode处理使用非ASCII字符集文字. 1.什么是Unicode Unicode支持一百万种以上的字符,每一个字符分 ...

  4. mac版photoshop滤镜库报错解法

    http://bbs.pcbeta.com/viewthread-1556878-1-1.html

  5. node-webkit 应用打包发布

    方便进行打包,使用了nodejs  ,gulp  nw-builder 备注  windows 操作系统部分版本需要包含  msvcr100.dll  建议制作安装程序的时候直接包含 为了进行视频以及 ...

  6. 【转】PHP error_reporting() 错误控制函数功能详解

    定义和用法: error_reporting() 设置 PHP 的报错级别并返回当前级别.   函数语法: error_reporting(report_level)   如果参数 level 未指定 ...

  7. Dom选择器及操作文本内容

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  8. Javascript 去掉字符串前后空格的五种方法

    第一种:循环检查替换 [javascript] //供使用者调用 function trim(s){ return trimRight(trimLeft(s)); } //去掉左边的空白 functi ...

  9. MongoDB 启动mongo不带DB

    > mongo --nodb > conn = new Mongo("localhost:27017"); > db = conn.getDB("tes ...

  10. jquery导航动画

    经常在网上看到的,鼠标在导航上移动时,导航底部的横条会自动移动到鼠标悬浮的导航项上. 效果如下图: 利用jquery的 animate 函数,很好实现.代码很简单! 代码如下: <!DOCTYP ...