JQuery实现展开关闭层的方法
本文实例讲述了JQuery实现展开关闭层的方法。分享给大家供大家参考。具体实现方法如下：
<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程序设计有所帮助。
相关文章
jQuery 使用手册，大家可以耐心的看完，就基本上入门了。2009-09-09
本实例使用jquery操作div的CSS实现了可隐藏重现的靠边悬浮层，具体实现代码如下，感兴趣的朋友可以参考下哈2013-05-05
这篇文章主要为大家详细介绍了jQuery实现简单菜单栏导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
jQuery中document与window以及load与ready 区别详解
这篇文章主要介绍了jQuery中document与window以及load与ready 区别详解,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jquery-mobile表单的创建方法,结合实例形式分析了jquery-mobile插件创建表单的具体操作步骤与各种常见表单元素的创建技巧,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了Jquery如何通过JSON字符串创建JSON对象,并附详细示例，需要的朋友可以参考下2014-08-08
jquery.gridrotator实现响应式图片展示画廊效果
本教程将教大家制作一个jQuery响应式图片展示画廊效果，所有图片以网格的形式排列，然后定时随机翻转其中某些格子用来切换图片。这种效果可以用来当做背景或装饰放在我们的网站上。2015-06-06
这篇文章主要介绍了jquery使用jxl插件导出excel的具体实现步骤,需要的朋友可以参考下2014-04-04
json数据是一种经型的实时数据交互的数据存储方法，使用到最多的应该是ajax与json配合使用了，下面我来给大家介绍jquery处理json数据方法。2014-06-06
在前端页面开发中,我们有时候希望能自定执行一些人性化操作,比如鼠标不用点击自动就能点击等操作,利用传统的js语言需要编写复杂的代码才能实现此功能,这时候我们使用jquery的trigger()方法就能轻松实现。本文就给大家详细介绍了关于jQuery中值得注意的trigger方法。2016-12-12
最新评论