欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery實(shí)現(xiàn)展開(kāi)關(guān)閉層的方法

 更新時(shí)間：2015年02月17日 16:33:42   作者：代碼家園  
這篇文章主要介紹了JQuery實(shí)現(xiàn)展開(kāi)關(guān)閉層的方法,實(shí)例分析了jQuery的slideToggle方法使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JQuery實(shí)現(xiàn)展開(kāi)關(guān)閉層的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

復(fù)制代碼 代碼如下:
<!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打造的展開(kāi)/關(guān)閉層效果</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">點(diǎn)擊展開(kāi)詳細(xì)……（若效果失效 ，請(qǐng)刷新本頁(yè)面，載入jquery后就正常了?。?lt;/a>

<div id="caja">
<a href="#" class="close">[x]關(guān)閉</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>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論