MouseOver إزالة فئة استعادة MouseOut فئة

Question

لذلك أحاول العثور على جزء بسيط من البرنامج النصي لإزالة الفصل في عنصر القائمة النشط عندما أقوم بتمرير الماوس فوق عناصر القائمة الأخرى. لكن استعدها عندما أبتعد عن الملاحة. يتمثل الجزء الصعب في التأكد من عدم تشغيل البرنامج النصي إذا كانت هناك قائمة فرعية نشطة على العنصر النشط الحالي.

على سبيل المثال ، لدينا 4 عناصر قائمة (Main 1 ، Main 2 ، Main 3 ، Main 4). اثنان لهما قوائم فرعية (الرئيسية 2 ، الرئيسية 4). الرئيسية 1 نشطة حاليًا ولديها فئة باسم نشط. عندما تحوم فوق Main 2 ، تظهر القائمة الفرعية ويكون Main 2 بها فئة تحوم وفئة hilite عند تحريك القائمة الفرعية الخاصة بها ولكن الآن الرئيسي 1 عاد إلى المخزون العادي. أنت الآن تبتعد عن التنقل ويعود Main 1 إلى وجود فصل دراسي نشط ويظهر Main 2 بشكل طبيعي

الآن قم بإجراء نفس الإعداد وتنشيط Main 2 مع عرض القائمة الفرعية بشكل افتراضي. عندما تقوم بالتمرير فوق Main 1 Main 3 Main 4 ، يتم إغلاق القائمة الفرعية ويتم إزالة الفصل النشط في Main 2 ولكن عندما تبتعد عنه يعود إلى النشاط ويظهر قائمته الفرعية. الآن إذا قمت بالتمرير فوق Main 2 أو كانت القائمة الفرعية ، فإن الفصل الدراسي لا يتغير أبدًا ، فسيظل كما هو.

لقد بحثت على نطاق واسع عن إعداد مشابه ولم أجد أي شيء سوى ما نشرته في سؤال سابق يمكن العثور عليه هنا ذهبت لإلقاء كل أشيائي ولكن بدون حظ توقف النشر () مما يجعلني أعتقد أن هذا هو الجزء الخطأ من الكود لهذا المشروع ولكنه عمل على مشروع مختلف تماما. لقد طرحت سؤالًا ثانيًا حول هذا الأمر لأنني لم أكن متأكدًا مما إذا كان بإمكاني النشر على الآخر إذا تم وضع علامة عليه بالفعل على أنه تم الرد عليه.

شكرًا مقدمًا وآمل أن أحصل على بعض المساعدة ،
تايلر

تحرير: هنا رابط للنص القديم في jsfiddle هنا تاريخ التحديث: 30/4/2011

Answer 1

لاحظ أن هذا لن يعمل إلا على Wordpress
يرجى نشر التعديلات على jsfiddle وليس على هذا الرمز ما لم يكن كبيرًا

حسنًا ، لدينا قائمة عمل أخيرًا. لقد قمت ببعض البحث الجاد ووجدت حلاً. الآن لست متأكدًا مما إذا كان صحيحًا أم لا ولكنه يعمل كما أريد. إذا أراد أي شخص استخدامه فلا تتردد. يتم استخدامه مع WordPress لذلك لدي وظيفة لإضافة بضعة أسطر من التعليمات البرمجية وسأقوم بنشرها أدناه أيضًا.

ها هي الوظيفة التي أضفتها إلى WordPress:

Genacodicetagpre

الكود أعلاه خاص ببرنامج wordpress 3.0+

سيؤدي هذا إلى إضافة فصل دراسي إلى عنصر القائمة الحالي

حتى الآن ، أضفت jQUERY مجموعة من الأشياء ، ومن المحتمل أن تكون هناك طريقة لدمجها معًا وجعلها تعمل كوحدة واحدة ، لكنني لا أعرف كيفية القيام بذلك ولكني سأضع الكود هنا ثم بعد ذلك عرض توضيحي لـ jsfiddle

فيما يلي نص jQUERY الذي جمعته معًا وسيضيف التأثير الموجود في العرض التوضيحي:

يؤدي هذا إلى إضافة فئة .not-active إلى جميع العناصر الرئيسية وغير الرئيسية:

Genacodicetagpre

يؤدي هذا إلى إضافة فئة .child-menu إلى جميع قوائم ul.sub:

Genacodicetagpre

يؤدي هذا إلى إضافة فئة أولية فرعية إلى العنصر الفرعي الأول في كل قائمة فرعية (تمت إضافتها لتصميم إضافي):

Genacodicetagpre

يؤدي هذا إلى إضافة فئة .last-child إلى العنصر الفرعي الأخير في كل قائمة فرعية (تمت إضافتها لتصميم إضافي):

Genacodicetagpre

سيؤدي هذا إلى تبديل الفئة .not-active في قائمة نشطة (يزيل .not-active للنص الأخير أدناه):

Genacodicetagpre

سيؤدي هذا إلى تبديل الفئة .not-active في قائمة فرعية نشطة (يزيل .not-active للنص الأخير أدناه):

Genacodicetagpre

يؤدي هذا إلى إضافة فئة .parent-active في حالة وجود .current-menu-parent:

Genacodicetagpre

يؤدي هذا إلى إضافة فئة .child-active في حالة وجود القائمة الرئيسية li.current-menu-parent ul.sub:

Genacodicetagpre

* يؤدي هذا إلى إضافة فئة .hilite إلى الوالد عند التمرير فوق القائمة الفرعية: *

Genacodicetagpre

يؤدي هذا إلى إزالة الفئة النشطة لقائمة نشطة عند التمرير فوق عناصر القائمة الأخرى ولكن لن يتم استخدامها عند التمرير فوق العنصر النشط أو العناصر الفرعية للعنصر النشط:

Genacodicetagpre

والآن بعد أن أصبح لدينا jQUERY ، فلنقم بإدخال css و html كمرجع.

هنا هو css:

Genacodicetagpre

يجب أن تكون سهلة القراءة

هنا هو html:

Genacodicetagpre

لا تتردد في استخدام هذا الرمز وإذا وجدت طريقة أبسط لتجميع كل هذه البرامج النصية ، فيرجى القيام بذلك.

يمكنك مشاهدة عرض توضيحي مباشر هنا على JSFIDDLE