這篇文章主要介紹了JQuery實現(xiàn)展開關(guān)閉層的方法,實例分析了jQuery的slideToggle方法使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JQuery實現(xiàn)展開關(guān)閉層的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title>JQuery打造的展開/關(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">點擊展開詳細……（若效果失效 ，請刷新本頁面，載入jquery后就正常了！）</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>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
更多信息請查看IT技術(shù)專欄
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試