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程序设计有所帮助。
相关文章
js jquery分别实现动态的文件上传操作按钮的添加和删除
本文为大家介绍下使用js及jquery实现动态的文件上传操作按钮的添加和删除，具体示例如下，希望对大家有所帮助2014-01-01
这里获得标签名为大写，如:A , DIV，需要的朋友可以参考下2012-07-07
今天小编就为大家分享一篇jquery获取元素到屏幕四周可视距离的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
基于jQuery的网页右下角弹出广告(IE7,firefox)
以前曾写过一个,不过太麻烦了,呵呵```现在改进了一下,其实很简单:css定位层一直在右下角,用js控制层的高度增减。2010-08-08
基本选择器：是jQuery中使用最频繁的选择器，它由元素Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找，感兴趣的朋友可以参考下哈2013-04-04
JQuery的强大之处，这里就不用讲了。这里将用一行简单的JQuery代码实现简单的表格筛选。2010-07-07
这篇文章主要介绍了jQuery加载及解析XML文件的方法,结合实例形式分析了xml文件的创建及jQuery针对xml文件的获取、解析相关操作技巧,需要的朋友可以参考下2017-01-01
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
此jQuery插件为Ajax分页插件，一次性加载，故分页切换时无刷新与延迟，如果数据量较大不建议用此方法，因为加载会比较慢,接下来详细介绍使用方法，感兴趣的朋友可以了解下2013-01-01
这篇文章主要介绍了jquery插件之文字间歇自动向上滚动效果代码,涉及jquery基于时间函数定时触发页面元素变换实现滚动效果的相关技巧,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了jquery实现Ajax请求的几种常见方式,结合实例形式总结分析了jQuery实现ajax请求常用的load()、post()、get()及Ajax()方法相关操作技巧,需要的朋友可以参考下2019-05-05
最新评论