jQuery中連續交替點擊事件是一種常見的交互形式,需要用到click()和toggle()方法。click()方法可以為元素綁定點擊事件,而toggle()方法則可以切換元素的顯示狀態。
$(document).ready(function() { var toggle = true; $("#myButton").click(function() { if(toggle) { // 初始狀態為true $("#myDiv").slideDown(); } else { $("#myDiv").slideUp(); } toggle = !toggle; // 切換狀態 }); });
上面的代碼使用了click()方法為按鈕綁定了一個點擊事件,當按鈕被點擊時,執行相應的代碼。在代碼中定義了一個toggle變量來記錄當前的狀態,初始值為true。在點擊按鈕時,根據toggle的值判斷當前的狀態,如果toggle為true,則讓“myDiv”元素向下滑動,否則向上滑動。最后再將toggle的值取反,以便下一次判斷狀態時可以正確執行。
如果我們需要連續點擊多次切換元素的狀態,可以使用另外一種方式:
$(document).ready(function() { $("#myButton").click(function() { $("#myDiv").toggle("slow"); }); });
上面的代碼中使用了toggle()方法,當元素被點擊時,該方法可以自動切換元素的顯示狀態。因為多次點擊會導致元素的顯示狀態來回切換,所以可以實現連續交替的效果。同時,我們還可以通過toggle()方法的參數來控制元素的切換速度,可以設置為“slow”、“fast”或者具體的毫秒數。