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 相关文章推荐
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
javascript几个易错点记录
Nov 26 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
jquery实现数字输入框
Feb 22 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
js实现简单的购物车有图有代码
2014/05/26 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
python集合删除多种方法详解
2020/02/10 Python
python实现与redis交互操作详解
2020/04/21 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
群众路线对照检查材料
2014/09/22 职场文书
工伤私了协议书范本
2014/11/24 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android