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 location几个方法小姐
Jul 09 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
JS定时关闭窗口的实例
May 22 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
Mac下安装vue
Apr 11 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
用vue设计一个日历表
Dec 03 Vue.js
JS Object构造函数之Object.freeze
Apr 28 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
如何过滤高亮显示非法字符
2006/10/09 PHP
phpmyadmin的#1251问题
2006/11/25 PHP
PHP 的 __FILE__ 常量
2007/01/15 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
python实现BackPropagation算法
2017/12/14 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
七年级生物教学反思
2014/01/30 职场文书
科研课题实施方案
2014/03/18 职场文书
2014年仓库工作总结
2014/11/20 职场文书
天坛导游词
2015/02/02 职场文书
员工自我评价范文
2015/03/11 职场文书
行政处罚决定书
2015/06/24 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby