脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQuery实现展开关闭层的方法教程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
本文实例讲述了jquery实现展开关闭层的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:
<!DOCTYPE htML PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html XMlns="https://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>
<p 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>
</p>
</body>
</html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JQuery实现展开关闭层的方法教程全部内容，希望文章能够帮你解决javascript代码实例教程-JQuery实现展开关闭层的方法教程所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。