我們上一篇說了jQuery中的hover()方法,此方法屬于jQuery中自定義的方法,說起來有點繞口。今天再說一說jQuery中另一個可以自定義的方法toggle()方法,這個方法在jQuery中有兩種定義,我們下邊分區來解釋與舉例

国产视频appjQuery中的toggle()的第一種解釋

toggle()方法:可以模擬鼠標的連續點擊事件,第一次點擊觸發第一個函數,第二次點擊觸發第二個函數,第三次點擊觸發第三個函數,如果后面有更多的函數則依次觸發,直到最后一個函數,然后再重復這個過程。

老規矩,舉個例子

利用toggle()寫一個點擊按鈕,依次改面網頁的背景色

利用toggle()寫一個點擊按鈕,依次改面網頁的背景色

HTML代碼

<button id='button'>點我測試</button>
<!--飛鳥慕魚博客-->

JQ代碼

$("#button").toggle(function(){
        $("body").css("background","red");
    },function(){
        $("body").css("background","green");
    },function(){
        $("body").css("background","blue");
})

結果:鼠標點擊一次,會改變一次網頁背景的顏色!

注意:此方法在JQ的1.8.1版本測試通過,高版本JQ已經廢棄此方法!

jQuery中的toggle()的第二種解釋

toggle():方法切換元素的可見狀態

舉例子,說明問題

利用jQ的toggle()方法,切換元素的可見與不可見的狀態

利用jQ的toggle()方法,切換元素的可見與不可見的狀態

HTML代碼

<button id='button'>點我測試</button>
<!--飛鳥慕魚博客-->
<p>飛鳥慕魚博客歡迎您!</p>

JQ代碼

$("#button").click(function(){
    $("p").toggle();
})

国产视频app結果:點擊測試按鈕,P標簽會在顯示與隱藏之間切換!

国产视频app注意:該效果適用于通過 jQuery 隱藏的元素,或在 CSS 中聲明 display:none 的元素(但不適用于 visibility:hidden 的元素)。