JQuery實現(xiàn)展開關(guān)閉層的方法
本文實例講述了JQuery實現(xiàn)展開關(guān)閉層的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
<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">點擊展開詳細(xì)……（若效果失效 ，請刷新本頁面，載入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è)計有所幫助。
- jquery實現(xiàn)仿新浪微博帶動畫效果彈出層代碼(可關(guān)閉、可拖動)
- jQuery實現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動)
- jQuery實現(xiàn)點擊按鈕彈出可關(guān)閉層的浮動層插件
- jquery右下角自動彈出可關(guān)閉的廣告層
- jQuery點擊自身以外地方關(guān)閉彈出層的簡單實例
- jquery三個關(guān)閉彈出層的小示例
- 點擊彈出層外區(qū)域關(guān)閉彈出層jquery特效示例
- jquery彈出關(guān)閉遮罩層實例
- jQuery 右下角滑動彈出可關(guān)閉重現(xiàn)層完整代碼
- jQuery實現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法【經(jīng)典】
相關(guān)文章
jQuery使用attr()方法同時設(shè)置多個屬性值用法實例
這篇文章主要介紹了jQuery使用attr()方法同時設(shè)置多個屬性值的用法,實例分析了jQuery中attr方法實現(xiàn)多個屬性設(shè)置的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
我們一般都是用HTML表格來顯示結(jié)構(gòu)化數(shù)據(jù)，如今有很多的 jQuery 表格插件可以幫助我們更好的組織和控制表格數(shù)據(jù)，增強(qiáng)表格的功能和操作。今天要與大家分享的是18個非常優(yōu)秀的 jQuery 表格插件，有用到朋友可以參考一下。2011-04-04
jQuery實現(xiàn)購物車多物品數(shù)量的加減+總價計算
這篇文章主要介紹了jQuery實現(xiàn)購物車多物品數(shù)量的加減+總價計算,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了jQuery實現(xiàn)帶延遲效果的滑動菜單,涉及jquery鼠標(biāo)事件操作頁面屬性定時變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)圖片切換代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
本篇文章，小編將為大家介紹jQuery實現(xiàn) 注冊時選擇閱讀條款 左右移動，有需要的朋友可以參考一下2013-04-04
jquery 與NVelocity 產(chǎn)生沖突的解決方法
有時候使用jquery 與NVelocity的時候，會產(chǎn)生沖突，下面是具體的解決方法，需要的朋友可以參考下。2011-06-06
這篇文章主要介紹了jQuery基本選擇器之標(biāo)簽名選擇器的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
Jquery實現(xiàn)仿騰訊娛樂頻道焦點圖(幻燈片)特效
這篇文章主要介紹了Jquery實現(xiàn)仿騰訊娛樂頻道焦點圖(幻燈片)特效,需要的朋友可以參考下2015-03-03
相信很多人用過jquery easyui，這個東西非常好用，界面也很美觀，你都不需要在界面上花太多的工夫，例子程序也比較完善，基本上看下例子就能很好的使用easyui了，很方便。2010-03-03