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 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
php中执行系统命令的方法
2015/03/21 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
Python类的基础入门知识
2008/11/24 Python
python局部赋值的规则
2013/03/07 Python
python利用datetime模块计算时间差
2015/08/04 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
Python 日期与时间转换的方法
2020/08/01 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
教你怎样写好自我评价
2013/10/05 职场文书
质检员岗位职责
2013/12/17 职场文书
企业厂长岗位职责
2013/12/17 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
2014年采购员工作总结
2014/11/18 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
首席执行官观后感
2015/06/03 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python