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脚本
Aug 04 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
分类解析jQuery选择器
Nov 23 Javascript
javascript history对象详解
Feb 09 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
JS实现吸顶特效
Jan 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
xml+php动态载入与分页
2006/10/09 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
python中import学习备忘笔记
2017/01/24 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python实现各种插值法(数值分析)
2019/07/30 Python
基于python中__add__函数的用法
2019/11/25 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
物理专业大学生职业生涯规划书
2014/02/07 职场文书
2014年德育工作总结
2014/11/20 职场文书