عرض مصدر jQuery/toggle event

<noinclude>{{DISPLAYTITLE:التابع <code>‎.toggle()‎</code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery}}</noinclude>
== <code>‎.toggle( handler, handler [, handler ] )‎</code> ==

=== القيمة المعادة ===
يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]].

=== الوصف ===
ربط معالجين أو أكثر بالعناصر المتطابقة، لتنفيذها بالتناوب.

=== <code>‎.toggle( handler, handler [, handler ] )‎</code> ===
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0]، وأٌهمل مع الإصدار: [http://api.jquery.com/category/version/1.8 1.8]، واُُزيل مع الإصدار: [http://api.jquery.com/category/version/1.9 1.9].

==== <code>handler</code> ====
دالة على الشكل [[JavaScript/Function|Function]]( Event eventObject )‎، تنفَّذ عند النقر على العنصر كل مرة زوجية.

==== <code>handler</code> ====
دالة على الشكل [[JavaScript/Function|Function]]( Event eventObject )‎، تنفَّذ عند النقر على العنصر كل مرة فردية.

==== <code>handler</code> ====
دالة على الشكل [[JavaScript/Function|Function]]( Event eventObject )‎، تعمل كمعالج إضافي للتبديل بينها بعد النقر.

'''ملاحظة مهمة''': أهمل هذا الشكل للتابع مع الإصدار jQuery [http://api.jquery.com/category/version/1.8 1.8] وأزيل مع الإصدار jQuery [http://api.jquery.com/category/version/1.9 1.9]. يوفر jQuery أيضًا تابع حركة يسمى ‎<code>[[jQuery/toggle|.toggle()]]</code>‎‎ يبدل من حالة رؤية العناصر. تعتمد الحركة أو خاصية الحدث على مجموعة من الوسائط المُمررة.

يربط التابع ‎<code>.toggle()</code>‎ معالج بالحدث <code>click</code>، لذلك تنطبق القواعد الموضحة في عملية تشغيل <code>click</code> هنا أيضًا.

على سبيل المثال، تأمل شيفرة HTML هذه:<syntaxhighlight lang="html">
<div id="target">
  انقر هنا
</div>
</syntaxhighlight>يمكن بعد ذلك ربط معالجات الأحداث بالعنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code><syntaxhighlight lang="jquery">
$( "#target" ).toggle(function() {
  alert( "المعالج الأول للتابع .toggle() المُستدعى." );
}, function() {
  alert( "المعالج الثاني للتابع .toggle() المُستدعى.." );
});
</syntaxhighlight>عند النقر على العنصر بشكل متكرر، تتبدل الرسائل:<syntaxhighlight lang="text">
المعالج الأول للتابع .toggle() المُستدعى.
المعالج الثاني للتابع .toggle() المُستدعى.
المعالج الأول للتابع .toggle() المُستدعى.
المعالج الثاني للتابع .toggle() المُستدعى.
المعالج الأول للتابع .toggle() المُستدعى.
</syntaxhighlight>إذا اُدخِل أكثر من معالجين، سيبدل التابع ‎<code>.toggle()‎</code> بينها. على سبيل المثال، إذا كان هناك ثلاثة معالجات، فسيُستدعى أول معالج في أول نقرة، ثم في النقرة الرابعة، ثم في السابعة، وهكذا.

من السهل نسبيًا تنفيذ نفس السلوك يدويًا، وقد يكون ذلك ضروريًا إذا ثبت أن الافتراضات المضمنة في ‎<code>.toggle()</code>‎ محدودة. على سبيل المثال، لا يمكن ضمان أن يعمل ‎<code>.toggle()‎</code>‎ بشكل صحيح إذا طُبِّق مرتين على نفس العنصر. ولما كان <code>‎.toggle()‎</code> يستخدم معالج <code>click</code> داخليًا للقيام بعمله، فيجب فك ارتباط الحدث <code>click</code> لإزالة السلوك المرتبط بالتابع ‎<code>.toggle()‎</code>، لكن ذلك سيؤثر أيضًا على معالجات الحدث <code>click</code> الأخرى. يستدعي التنفيذ أيضًا التابع ‎[[jQuery/event/preventDefault|<code>.preventDefault()</code>]]‎ على الحدث، لذلك لا يمكن تتبع الروابط أو النقر على الأزرار إذا اُستُدعيَ التابع‎<code>.toggle()‎</code>‎ على العنصر.

=== أمثلة ===
تبديل نمط على خلايا الجدول (لا ينصح باستخدامه. استخدم التابع <code>[[jQuery/toggleClass|‎.toggleClass()‎‎]]</code> بدلاً منه):<syntaxhighlight lang="jquery">
$( "td" ).toggle(
  function() {
    $( this ).addClass( "مُحدد" );
  }, function() {
    $( this ).removeClass( "مُحدد" );
  }
);
</syntaxhighlight>

== مصادر ==
* [http://api.jquery.com/toggle-event/ صفحة التابع ‎ ‎.toggle()‎‎في توثيق jQuery الرسمي].
[[تصنيف:jQuery]]
[[تصنيف:jQuery Method]]
[[تصنيف:jQuery Events]]
[[تصنيف:jQuery Deprecated]]