jquery 中toggle的2種用法詳解(推薦)
更新時(shí)間：2016年09月02日 11:38:52 投稿：jingxian
下面小編就為大家?guī)?lái)一篇jquery 中toggle的2種用法詳解(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
一、在元素的click事件中綁定兩個(gè)或兩個(gè)以上的函數(shù) toggle不像bind需要在后面添加"click"來(lái)綁定click觸發(fā)事件，toggle本身就是click觸發(fā)的（而且只能click觸發(fā)），
如下實(shí)例：
<input id="btntest" type="button" value="點(diǎn)一下我" />
<div>我是動(dòng)態(tài)顯示的</div>
<script type="text/javascript">
$(function () {
$("#btntest")
$("#btntest").toggle(
function(){
$("div").html("我變了！");
},
function(){
$("div").html("我又變了！");
});
});
</script>
二、切換元素的顯示與隱藏效果：
<input id="btntest" type="button" value="點(diǎn)一下我" />
<div>我是動(dòng)態(tài)顯示的</div>
<script type="text/javascript">
$(function () {
$("#btntest").bind("click",function(){
$("div").toggle(500);//此處的 500 是隱藏顯示的延遲時(shí)間，默認(rèn)為0，也可以用"slow","normal"或"fast"
//如果里面的值為true（toggle(true)）時(shí)只能顯示元素，值為false（toggle(false)）時(shí)只能隱藏元素。） }) }); </script>
以上這篇jquery 中toggle的2種用法詳解(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery?獲取與設(shè)置元素屬性的詳細(xì)方法(看完這篇文章就搞明白了)
這篇文章帶領(lǐng)大家熟練掌握?jQuery?的屬性方面的操作，包括固有屬性的獲取與設(shè)置，自定義屬性的獲取與設(shè)置等等，走進(jìn)?jQuery?的更深層次階段，這也是腳本之家小編發(fā)現(xiàn)的一篇比較實(shí)用的文章2023-06-06
jQuery拖動(dòng)布局其結(jié)果保存到數(shù)據(jù)庫(kù)
這篇文章介紹了jQuery實(shí)現(xiàn)拖動(dòng)布局并將排序結(jié)果保存到數(shù)據(jù)庫(kù)的實(shí)現(xiàn)方法，感興趣的朋友可以參考一下2015-10-10
jQuery實(shí)現(xiàn)仿騰訊微博滑出效果報(bào)告每日天氣的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿騰訊微博滑出效果報(bào)告每日天氣的方法,涉及jQuery鼠標(biāo)事件及css樣式操作技巧,需要的朋友可以參考下2015-05-05
jQuery使用之標(biāo)記元素屬性用法實(shí)例
這篇文章主要介紹了jQuery使用之標(biāo)記元素屬性用法,實(shí)例分析了jQuery如何控制頁(yè)面,包含元素的屬性、css樣式風(fēng)格、DOM模型、表單元素和事件處理等使用技巧,需要的朋友可以參考下2015-01-01
jquery中使用$(#form).submit()重寫提交表單無(wú)效原因分析及解決
jqeury的validationEngine做ajax校驗(yàn)，當(dāng)表單中的最后一個(gè)字段需要做ajax驗(yàn)證,在字段輸入完畢后點(diǎn)擊回車提交表單時(shí)不起作用，接下來(lái)為大家介紹下解決方法感興趣的各位可以參考下哈2013-03-03
使用jQuery如何寫一個(gè)含驗(yàn)證碼的登錄界面
這篇文章主要介紹了如何寫一個(gè)含驗(yàn)證碼的登錄界面，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
基于jquery的button默認(rèn)enter事件(回車事件)。
這里我介紹一下，button按鈕默認(rèn)回車（enter）事件。如果大家可以用submit，就不用看以下代碼，因?yàn)閟ubmit可以直接默認(rèn)回車事件（enter）2011-05-05
Jquery讓form表單異步提交代碼實(shí)現(xiàn)
這篇文章主要介紹了Jquery讓form表單異步提交代碼實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
Backstretch是一款簡(jiǎn)單的jQuery插件，可以幫助你給網(wǎng)頁(yè)添加一個(gè)動(dòng)態(tài)的背景圖片，可以自動(dòng)調(diào)整大小適應(yīng)屏幕的尺寸，當(dāng)然這樣做的缺點(diǎn)是當(dāng)圖片尺寸比屏幕小的時(shí)候,圖片會(huì)因?yàn)樽詣?dòng)延伸而變形，所以我們可以勁量使用高分辨率大尺寸的圖片做背景,更重要的是支持圖片的自動(dòng)切換2015-04-04
這篇文章主要介紹了jQuery實(shí)現(xiàn)幻燈片帶縮略圖輪播特效,圖片可以自行替換，推薦給大家，有需要的小伙伴可以參考下2015-08-08