快捷導(dǎo)航

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

更新時(shí)間：2015年02月17日 16:33:42 作者：代碼家園

這篇文章主要介紹了JQuery實(shí)現(xiàn)展開關(guān)閉層的方法,實(shí)例分析了jQuery的slideToggle方法使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

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

<!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打造的展開/關(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)擊展開詳細(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)文章

jQuery 使用手冊(cè)(七)
jQuery 使用手冊(cè)，大家可以耐心的看完，就基本上入門了。
2009-09-09
jquery實(shí)現(xiàn)的可隱藏重現(xiàn)的靠邊懸浮層實(shí)例代碼
本實(shí)例使用jquery操作div的CSS實(shí)現(xiàn)了可隱藏重現(xiàn)的靠邊懸浮層，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈
2013-05-05
jQuery實(shí)現(xiàn)菜單欄導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單菜單欄導(dǎo)航效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
jQuery中document與window以及l(fā)oad與ready 區(qū)別詳解
這篇文章主要介紹了jQuery中document與window以及l(fā)oad與ready 區(qū)別詳解,需要的朋友可以參考下
2014-12-12
jquery-mobile表單的創(chuàng)建方法詳解
這篇文章主要介紹了jquery-mobile表單的創(chuàng)建方法,結(jié)合實(shí)例形式分析了jquery-mobile插件創(chuàng)建表單的具體操作步驟與各種常見表單元素的創(chuàng)建技巧,需要的朋友可以參考下
2016-11-11
Jquery通過(guò)JSON字符串創(chuàng)建JSON對(duì)象
這篇文章主要介紹了Jquery如何通過(guò)JSON字符串創(chuàng)建JSON對(duì)象,并附詳細(xì)示例，需要的朋友可以參考下
2014-08-08
jquery.gridrotator實(shí)現(xiàn)響應(yīng)式圖片展示畫廊效果
本教程將教大家制作一個(gè)jQuery響應(yīng)式圖片展示畫廊效果，所有圖片以網(wǎng)格的形式排列，然后定時(shí)隨機(jī)翻轉(zhuǎn)其中某些格子用來(lái)切換圖片。這種效果可以用來(lái)當(dāng)做背景或裝飾放在我們的網(wǎng)站上。
2015-06-06
jquery使用jxl插件導(dǎo)出excel示例
這篇文章主要介紹了jquery使用jxl插件導(dǎo)出excel的具體實(shí)現(xiàn)步驟,需要的朋友可以參考下
2014-04-04
jquery處理json數(shù)據(jù)實(shí)例分析
json數(shù)據(jù)是一種經(jīng)型的實(shí)時(shí)數(shù)據(jù)交互的數(shù)據(jù)存儲(chǔ)方法，使用到最多的應(yīng)該是ajax與json配合使用了，下面我來(lái)給大家介紹jquery處理json數(shù)據(jù)方法。
2014-06-06
jQuery中值得注意的trigger方法淺析
在前端頁(yè)面開發(fā)中,我們有時(shí)候希望能自定執(zhí)行一些人性化操作,比如鼠標(biāo)不用點(diǎn)擊自動(dòng)就能點(diǎn)擊等操作,利用傳統(tǒng)的js語(yǔ)言需要編寫復(fù)雜的代碼才能實(shí)現(xiàn)此功能,這時(shí)候我們使用jquery的trigger()方法就能輕松實(shí)現(xiàn)。本文就給大家詳細(xì)介紹了關(guān)于jQuery中值得注意的trigger方法。
2016-12-12