أنماط زائفة غالية في jQuery

Question

كيف يمكنني الكتابة فوق CSS أدناه مع jQuery؟

(لا يتم تشغيل الرسوم المتحركة وهي مجرد مفتاح فوري.)

menu span ul {display: none;}
menu span:hover ul {display: block;}

$('#menu span').mouseenter(function(){
    $('#menu span ul').slideDown('fast');
}).mouseleave(function(){
    $('#menu span ul').slideUp('fast');
});

Answer 1

خدعة واحدة من أجل التناغم الرشيقة هي عدم الاضطرار إلى تجاوز الأنماط ، مثل هذا:

<noscript>
  <style type="text/css">#menu span:hover ul {display: block;}</style>
</noscript>

من ورقة الأنماط المرتبطة بنفس الطريقة مع كل هذه الأساليب المستخدمين لمستخدمي لا.

---

أو ، قم بذلك عبر الفصل الذي تقدمه إليه #menu يمكنك إزالته حتى لا تتطابق القواعد ، مثل هذا:

#menu span ul {display: none;}
#menu.noJS span:hover ul {display: block;}

وفي البرنامج النصي الخاص بك ، فقط قم بإزالة تلك الفئة:

$("#menu").removeClass("noJS");

---

كملاحظة جانبية ، يمكنك تخفيف الكود الخاص بك باستخدام .hover() و .slideToggle() مثله:

$('#menu span').hover(function(){
  $(this).find('ul').slideToggle('fast');
});

Answer 2

أنت لا ترى الرسوم المتحركة لأن CSS الخاص بك يتجاوزها.

إزالة

menu span:hover ul {display: block;}

لن أزعج نفسي بمحاولة تجاوز CSS لاستيعاب المتصفحات التي لم يتم تمكين JS. الرقم صغير لدرجة أنه لا يستحق النظر.