快捷導(dǎo)航

jquery 中toggle的2種用法詳解(推薦)

更新時(shí)間：2016年09月02日 11:38:52 投稿：jingxian

下面小編就為大家?guī)硪黄猨query 中toggle的2種用法詳解(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

一、在元素的click事件中綁定兩個(gè)或兩個(gè)以上的函數(shù) toggle不像bind需要在后面添加"click"來綁定click觸發(fā)事件，toggle本身就是click觸發(fā)的（而且只能click觸發(fā)），

如下實(shí)例：

<input id="btntest" type="button" value="點(diǎn)一下我" />
<div>我是動態(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>我是動態(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種用法詳解(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery?獲取與設(shè)置元素屬性的詳細(xì)方法(看完這篇文章就搞明白了)
這篇文章帶領(lǐng)大家熟練掌握?jQuery?的屬性方面的操作，包括固有屬性的獲取與設(shè)置，自定義屬性的獲取與設(shè)置等等，走進(jìn)?jQuery?的更深層次階段，這也是腳本之家小編發(fā)現(xiàn)的一篇比較實(shí)用的文章
2023-06-06
jQuery拖動布局其結(jié)果保存到數(shù)據(jù)庫
這篇文章介紹了jQuery實(shí)現(xiàn)拖動布局并將排序結(jié)果保存到數(shù)據(jù)庫的實(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如何控制頁面,包含元素的屬性、css樣式風(fēng)格、DOM模型、表單元素和事件處理等使用技巧,需要的朋友可以參考下
2015-01-01
jquery中使用$(#form).submit()重寫提交表單無效原因分析及解決
jqeury的validationEngine做ajax校驗(yàn)，當(dāng)表單中的最后一個(gè)字段需要做ajax驗(yàn)證,在字段輸入完畢后點(diǎn)擊回車提交表單時(shí)不起作用，接下來為大家介紹下解決方法感興趣的各位可以參考下哈
2013-03-03
使用jQuery如何寫一個(gè)含驗(yàn)證碼的登錄界面
這篇文章主要介紹了如何寫一個(gè)含驗(yàn)證碼的登錄界面，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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ì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-11-11
jQuery背景插件backstretch使用指南
Backstretch是一款簡單的jQuery插件，可以幫助你給網(wǎng)頁添加一個(gè)動態(tài)的背景圖片，可以自動調(diào)整大小適應(yīng)屏幕的尺寸，當(dāng)然這樣做的缺點(diǎn)是當(dāng)圖片尺寸比屏幕小的時(shí)候,圖片會因?yàn)樽詣友由於冃危晕覀兛梢詣帕渴褂酶叻直媛蚀蟪叽绲膱D片做背景,更重要的是支持圖片的自動切換
2015-04-04
jQuery幻燈片帶縮略圖輪播效果代碼分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)幻燈片帶縮略圖輪播特效,圖片可以自行替換，推薦給大家，有需要的小伙伴可以參考下
2015-08-08