jQuery中slideUp 和 slideDown 的點擊事件
更新時間：2015年02月26日 11:12:29 投稿：hebedich
這篇文章主要介紹了jQuery中slideUp 和 slideDown 的點擊事件的相關(guān)資料,需要的朋友可以參考下
先貼代碼，再講詳細事件
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js"></script>
</head>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
<body>
<div class="panel">
<p>W3School - 領(lǐng)先的 Web 技術(shù)教程站點</p>
<p>在 W3School，你可以找到你所需要的所有網(wǎng)站建設(shè)教程。</p>
</div>
<p class="flip">請點擊這里</p>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideUp(300);
});
});
</script>
</body>
</html>
重點（Tips）:
1、click 事件 按鈕的選擇
在這個斷碼中是 “.flip”
2、節(jié)點的選擇
在這段代碼中是 “.panel”
再貼一段代碼
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle(300);
});
});
</script>
.slideToggle 事件
將這個滑動效果進行了 Up 和 Down 的2中效果 都展示出來
以上內(nèi)容就是關(guān)于jQuery中slideUp 和 slideDown 的詳細講解了，希望大家能夠喜歡。
您可能感興趣的文章:
- jquery無法為動態(tài)生成的元素添加點擊事件的解決方法(推薦)
- jQuery添加options點擊事件并傳值實例代碼
- jquery 觸發(fā)a鏈接點擊事件解決方案
- jQuery實現(xiàn)當按下回車鍵時綁定點擊事件
- jQuery實現(xiàn)按鈕只點擊一次后就取消點擊事件綁定的方法
- jquery中交替點擊事件的實現(xiàn)代碼
- jquery實現(xiàn)點擊label的同時觸發(fā)文本框點擊事件的方法
- jQuery實現(xiàn)移動 和 漸變特效的點擊事件
- jQuery實現(xiàn)點擊行選中或取消CheckBox的方法
- jQuery移除或禁用html元素點擊事件常用方法小結(jié)
相關(guān)文章
這篇文章主要內(nèi)容是JQuery實現(xiàn)可編輯的表格實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-09-09
JQuery Mobile實現(xiàn)導(dǎo)航欄和頁腳
導(dǎo)航欄由一組水平排列的鏈接構(gòu)成，通常位于頁眉或頁腳內(nèi)部。本文給大家介紹JQuery Mobile實現(xiàn)導(dǎo)航欄和頁腳的相關(guān)知識，需要的朋友參考下吧2016-03-03
bootstrapValidator表單校驗、更改狀態(tài)、新增、移除校驗字段的實例代碼
這篇文章主要介紹了bootstrapValidator表單校驗、更改狀態(tài)、新增、移除校驗字段,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
jQuery移除或禁用html元素點擊事件常用方法小結(jié)
這篇文章主要介紹了jQuery移除或禁用html元素點擊事件常用方法,結(jié)合實例形式總結(jié)分析了jQuery針對onclick事件的禁用與屏蔽技巧,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了jquery datepicker參數(shù)介紹和示例,需要的朋友可以參考下2014-04-04
讓jQuery與其他JavaScript庫并存避免沖突的方法
為了解決jQuery和其他JavaScript庫中$()函數(shù)的沖突，需要取消jQuery的$()函數(shù)，下面有個不錯的方法，感興趣的朋友可以參考下2013-12-12
jQuery插件zTree實現(xiàn)刪除樹子節(jié)點的方法示例
這篇文章主要介紹了jQuery插件zTree實現(xiàn)刪除樹子節(jié)點的方法,結(jié)合實例形式分析了jQuery樹形插件zTree針對節(jié)點的遍歷與刪除操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
jquery實現(xiàn)Ajax請求的幾種常見方式總結(jié)
這篇文章主要介紹了jquery實現(xiàn)Ajax請求的幾種常見方式,結(jié)合實例形式總結(jié)分析了jQuery實現(xiàn)ajax請求常用的load()、post()、get()及Ajax()方法相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
jQuery Selectors(選擇器)的使用(四-五、內(nèi)容篇&可見性篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實例方式進行講述，以簡單，全面為基礎(chǔ)，不會涉及很深，我的學(xué)習(xí)方法：先入門，后進階！2009-12-12
jQuery刪除/清空指定元素的所有子節(jié)點實例代碼
這篇文章主要給大家介紹了關(guān)于jQuery刪除/清空指定元素的所有子節(jié)點，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用jQuery具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07