jQuery رویداد - روش toggle()

دستورالعمل مرجع jQuery برای رویدادها

مثال

تغییر رنگ پس‌زمینه متفاوت:

(\
  function(){
  (\
  function(){
  $("body").css("background-color","red");}
  function(){
  $("body").css("background-color","yellow");}
);

تست کنید

تعریف و استفاده

toggle() روشی است که برای پیوند دادن دو یا بیشتر تابع پردازشگر رویداد، برای پاسخ به رویداد کلیک چرخه‌ای انتخاب شده استفاده می‌شود.

این روش همچنین می‌تواند برای تغییر عناصر انتخاب شده استفاده شود. hide() با show() روش.

دو یا بیشتر تابع را به رویداد Toggle متصل کنید

در زمان کلیک بر روی عنصر مشخص شده، بین دو یا بیشتر تابع به صورت چرخه‌ای تغییر می‌کند.

اگر دو یا بیشتر تابع تعیین شده باشد، toggle() روشی را تغییر می‌دهد. به عنوان مثال، اگر سه تابع وجود داشته باشد، اولین کلیک اولین تابع را فراخوانی می‌کند، دومین کلیک دومین تابع را فراخوانی می‌کند، سومین کلیک سومین تابع را فراخوانی می‌کند. چهارمین کلیک دوباره اولین تابع را فراخوانی می‌کند و به همین ترتیب.

نحوه استفاده

$(selector).toggle(function1(),function2(),functionN(),...)

تست کنید

پارامترها توضیحات
function1() ضروری. تعیین تابعی که در هر دفعه‌ای که عنصر دوباره کلیک می‌شود، اجرا می‌شود.
function2() ضروری. تعیین تابعی که در هر دفعه‌ای که عنصر کلیک می‌شود، اجرا می‌شود.
functionN(),... اختیاری. تعیین تابع دیگری که باید تغییر کند.

تغییر Hide() و Show()

بررسی اینکه هر عنصر قابل مشاهده است یا خیر.

اگر عنصر مخفی است، show() اجرا می‌شود. اگر عنصر قابل مشاهده است، hide() اجرا می‌شود. این امکان را می‌دهد تا اثرات کلیدواژه‌ای ایجاد شود.

نحوه استفاده

$(selector).toggle(speed,callback)

تست کنید

پارامترها توضیحات
speed

اختیاری. تعیین سرعت اثرات show/hide. پیش‌فرض "0" است.

ممکنه‌ها:

  • میلی‌ثانیه (مثلاً 1500)
  • "slow"
  • "normal"
  • "fast"
callback

اختیاری. تابعی که پس از تکمیل toggle() اجرا می‌شود.

برای یادگیری بیشتر در مورد callback، لطفاً از آموزش Callback Function。

نمایش یا مخفی کردن عناصر

تعیین می‌کند که آیا فقط باید عناصر تطابق یافته نمایش داده شوند یا مخفی شوند.

نحوه استفاده

$(selector).toggle(switch)

تست کنید

پارامترها توضیحات
switch

ضروری. یک مقدار بولین، که تعیین می‌کند toggle() آیا باید فقط عناصر انتخاب شده را نمایش دهد یا مخفی کند.

  • true - عناصر نمایش داده می‌شوند
  • false - عناصر مخفی

دستورالعمل مرجع jQuery برای رویدادها