JQuery实现展开关闭层的方法


Posted in Javascript onFebruary 17, 2015

本文实例讲述了JQuery实现展开关闭层的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>JQuery打造的展开/关闭层效果</title>

<script type="text/javascript" src="/images/jquery.js"></script>

<script type="text/javascript">

$(function()

{
$("#mostrar").click(function(event) {

event.preventDefault();

$("#caja").slideToggle();

});
$("#caja a").click(function(event) {

event.preventDefault();

$("#caja").slideUp();

});

});

</script>

<style type="text/css">

body {

 font-family: Verdana, Arial, Helvetica, sans-serif;

 font-size: 11px;

 color: #666666; 

}

a{color:#993300; text-decoration:none;}

#caja {

width:70%;

display: none;

padding:5px;

border:2px solid #FADDA9;

background-color:#FDF4E1;

}

#mostrar{

display:block;

width:70%;

padding:5px;

border:2px solid #D0E8F4;

background-color:#ECF8FD;

}

</style>

</head>

<body>

<a href="#" id="mostrar">点击展开详细……(若效果失效 ,请刷新本页面,载入jquery后就正常了!)</a>
<div id="caja">

<a href="#" class="close">[x]关闭</a>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
页面中js执行顺序
Nov 09 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
JSON格式化输出
Nov 10 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 #Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 #Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 #Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 #Javascript
js鼠标滑过图片震动特效的方法
Feb 17 #Javascript
js实现双击图片放大单击缩小的方法
Feb 17 #Javascript
js图片模糊切换显示特效的方法
Feb 17 #Javascript
You might like
PHP数据库操作面向对象的优点
2006/10/09 PHP
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
小程序自定义日历效果
2018/12/29 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
pycharm 使用心得(三)Hello world!
2014/06/05 Python
探究python中open函数的使用
2016/03/01 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
继电保护工岗位职责
2014/01/05 职场文书
法律进社区实施方案
2014/03/21 职场文书
农业开发项目建议书
2014/05/16 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技