أقدم لكم اليوم درس رائع جدا جدا، وخفيف جدا جدا جدا، ومفيد جدا جدا جدا
الآن نطرح عليكم المشكلة: وهي عند استخدام الحدث hover في الجي كويري، لشيء معين (مثلا لانسدال القائمة الفرعية) الآن عند مرور الماوس لأكثر من مرة متتالية بسرعة ومن ثم نرفع الماوس على العنصر الأب li كي تظهر قائمة فرعية بأي حركة، نلاحظ أن القائمة الفرعية تظهر وتختفي على عدد مرات تمرير الماوس.
الآن سيكون الشرح أيضا على قائمة فرعية تمام كموقع ترايدنت، بشكل عادي وطبيعي سنقوم بعمل قائمة رئيسية وتتفرع منها قائمة فرعية، ونقوم بتنسيقها بالشكل الذي يحلو لنا.
الآن بالنسبة للقائمة الفرعية، نريد أن نظهرها من خلال حركة عن طريق jquery وهي حركة slideDown ، الكود التالي يقوم بعمل ذلك.
بهذه الطريقة تظهر القائمة الفرعية، ولكن مع وجود المشكلة كما هي.
أما الآن سنقوم بكتابة الكود ولكن مع حل المشكلة، كما بالكود التالي:
ماذا الفرق بين الكود الأول والكود الثاني.
في الأول وهي الصيغة الطبيعية لكتابة الكود، ولكن مع وجود المشكلة المذكورة.
أما في الكود الثاني قمنا بحل المشكلة بوضع كود بسيط وهو :
تم وضعها قبل الحركة المستخدمة وهي slideDown
كما يمكننا أن نستخدمها مع أي حركة في حالة الحدث الـ hover، كي نحصل على طريقة أفضل في أداء الحركة.
الصورة التالية توضح كتابة الكود والفرق بينه.
لمعيانة العمل بالكامل، وملاحظة الفرق بين المشكلة وحلها، يمكنكم من خلال الرابط التالي:
قائمة بتقنية css + قائمة منسدلة + jquery - jsFiddle
المشكلة موجودة في العنصر li باسم "أقسام الموقع"، بينما حل المشكلة موجود في العنصر li باسم "دروس تعليمية" والفرعي منه باسم "دروس لغات البرمجة".
الآن نطرح عليكم المشكلة: وهي عند استخدام الحدث hover في الجي كويري، لشيء معين (مثلا لانسدال القائمة الفرعية) الآن عند مرور الماوس لأكثر من مرة متتالية بسرعة ومن ثم نرفع الماوس على العنصر الأب li كي تظهر قائمة فرعية بأي حركة، نلاحظ أن القائمة الفرعية تظهر وتختفي على عدد مرات تمرير الماوس.
الآن سيكون الشرح أيضا على قائمة فرعية تمام كموقع ترايدنت، بشكل عادي وطبيعي سنقوم بعمل قائمة رئيسية وتتفرع منها قائمة فرعية، ونقوم بتنسيقها بالشكل الذي يحلو لنا.
الآن بالنسبة للقائمة الفرعية، نريد أن نظهرها من خلال حركة عن طريق jquery وهي حركة slideDown ، الكود التالي يقوم بعمل ذلك.
كود:
// لإظهار القائمة الفرعية قبل حل المشكلة
$('ul#menu > li.unfix').hover(function(){
$(this).find('>ul').slideDown();
},function(){
$(this).find('>ul').slideUp();
});
أما الآن سنقوم بكتابة الكود ولكن مع حل المشكلة، كما بالكود التالي:
كود:
// لإظهار القائمة الفرعية الأولى بعد حل المشكلة
$('ul#menu > li.fix').hover(function(){
$(this).find('>ul').stop(true, true).slideDown();
},function(){
$(this).find('>ul').stop(true, true).slideUp();
});
في الأول وهي الصيغة الطبيعية لكتابة الكود، ولكن مع وجود المشكلة المذكورة.
أما في الكود الثاني قمنا بحل المشكلة بوضع كود بسيط وهو :
كود:
.stop(true, true)
كما يمكننا أن نستخدمها مع أي حركة في حالة الحدث الـ hover، كي نحصل على طريقة أفضل في أداء الحركة.
الصورة التالية توضح كتابة الكود والفرق بينه.
لمعيانة العمل بالكامل، وملاحظة الفرق بين المشكلة وحلها، يمكنكم من خلال الرابط التالي:
قائمة بتقنية css + قائمة منسدلة + jquery - jsFiddle
المشكلة موجودة في العنصر li باسم "أقسام الموقع"، بينما حل المشكلة موجود في العنصر li باسم "دروس تعليمية" والفرعي منه باسم "دروس لغات البرمجة".