JQuery实现展开关闭层的方法
本文实例讲述了JQuery实现展开关闭层的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery打造的展开/关闭层效果</title>
<scripttype="text/javascript"src="/images/jquery.js"></script>
<scripttype="text/javascript">
$(function()
{
$("#mostrar").click(function(event){ event.preventDefault(); $("#caja").slideToggle(); });
$("#cajaa").click(function(event){ event.preventDefault(); $("#caja").slideUp(); }); }); </script> <styletype="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:2pxsolid#FADDA9; background-color:#FDF4E1; } #mostrar{ display:block; width:70%; padding:5px; border:2pxsolid#D0E8F4; background-color:#ECF8FD; } </style> </head> <body> <ahref="#"id="mostrar">点击展开详细……（若效果失效，请刷新本页面，载入jquery后就正常了！）</a>
<divid="caja"> <ahref="#"class="close">[x]关闭</a> <p>Loremipsumdolorsitamet,consetetursadipscingelitr,seddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyamerat,seddiamvoluptua.Atveroeosetaccusametjustoduodoloresetearebum.Stetclitakasdgubergren</p> </div> </body> </html>