萬盛學電腦網 >> 腳本專題 >> javascript >> JQuery實現展開關閉層的方法
JQuery實現展開關閉層的方法
這篇文章主要介紹了JQuery實現展開關閉層的方法,實例分析了jQuery的slideToggle方法使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JQuery實現展開關閉層的方法。分享給大家供大家參考。具體實現方法如下：
代碼如下: <!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打造的展開/關閉層效果</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程序設計有所幫助。
