تصف هذه المقالة تأثير القائمة المنسدلة لمحاكاة JS Simulation Bootstrap. شاركه للرجوع إليه ، على النحو التالي:
محاكاة القائمة المنسدلة bootstrap
لقطع تأثير في عملك: انقر على شريط التنقل ، ستظهر القائمة التالية ، ولكن عند النقر على أماكن أخرى ، سيتم إخفاء القائمة الفرعية ، يكون التأثير مشابهًا بعض الشيء مع "القائمة المنسدلة" من Bootstrap
نظرًا لأن نمط القائمة الفرعية bootstrap يختلف عن التصميم ، فأنت بحاجة إلى كتابة تأثير مماثل بنفسك.
عند النقر فوق عنصر تحكم ، يتم عرض القائمة المنسدلة. ومع ذلك ، كيف يمكن إخفاءه تلقائيًا عند النقر فوق مكان فارغ؟
في البداية ، ربطت حدث onclick للجسم. عند النقر على مكان فارغ ، يتم تشغيل حدث Click Body بسبب فقاعة الحدث. ومع ذلك ، فإن المشكلة هي أنه عند النقر على عنصر التحكم ، سيتم أيضًا تشغيل حدث النقر فوق الجسم ، مما يؤدي إلى سحب القائمة المنسدلة بعد عرضه ، لذلك تكون هذه الفكرة غير صحيحة.
نظرًا لأن Bootstrap نفذت هذه الوظيفة ، تحقق من رمز المصدر الخاص بها ووجد حلاً:
ربط المستند (إخفاء القائمة الفرعية الخاصة به) ، ويمنع التحكم من الفقاعات عند تشغيل الطريقة ويمنعها من تشغيل الربط.
<!-Filter Navigation Bar-> <div style = "z-index: 999"> <viv> <span onClick = "ShoworHideItem (this ، event)"> الفئة <span> </span> </span> <l data-red = "Hide" style = "z-index: 999 ؛"> <li onclick = "jumpto (this)" target = "https://www.baidu.com"> <span> التدبير المنزلي </span> <span> </span> <span> </span> </li> <li onclick = "jumpto (this)" target = "https://www.baidu.com"> </span> onClick = "Jumpto (this)" target = "https://www.baidu.com"> <span> الوجبات الخفيفة </span> <span> </span> <span> </span> </li> </ul> </ul> </uliv> </viv> بيانات البيانات = "إخفاء" style = "أعلى: 100 ٪ ؛ اليسار: 0px ؛ z-index: 999 ؛ عرض: none"> <li onClick = "Jumpto (this)" target = "https://www.baidu.com"> <span> heatekeeping1 </span> </span> </li> target = "https://www.baidu.com"> <span> Vegetable1 </span> <span> </span> <span> </span> <span> </span> </li> <li onclick = "jumpto (this)" target = "https://www.baidu.com </ul> </viv> </viv> <viv> <div onClick = "Showsearch (this ، event)"> <span> </span> </viv> <!-عرض مربع البحث-> <div> <div style = "top: 58 ٪ ؛ right: 0px ؛ z-index: 999 ؛ عرض: لا شيء ؛" Data-Search = "Hide"> <viv> <viv> <div style = "margin-reight: 80px ؛"> <span style = "left: 0px ؛ top: 0px ؛ 12px ؛ "> البحث </button> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> <script> $ (function () {// ربط الحدث $ (وثيقة) .on (" انقر ". $ ("ul [data-show = 'show']). slideup (" Slow ") ؛ $ ("div [data-search = 'show']"). css ("Display" ، "none"). var $ currentobj = $ (obj) ؛ // إخفاء جميع القوائم المنسدلة $ ("ul [data-show = 'show']"). Hide () ؛ // مسح جميع الفئات النشطة $ currentobj.closest (". ROW"). Find ("div.active"). removeClass ("Active") ؛ // أضف النمط المحدد $ currentobj.closest (". // UL هي الحالة الموسعة إذا ($ ul.data ("show") == "show") {$ ul.slideup ("Slow") ؛ $ ul.attr ("عرض البيانات" ، "إخفاء") ؛ } آخر {// ul هو الحالة الموسعة $ ul.slidedown ("Slow") ؛ $ ul.attr ("عرض البيانات" ، "show") ؛ // Stop Event Bubble Event.StopPropagation () ؛ }} // عرض وظيفة مربع البحث DOFERESERCH (OBJ ، الحدث) {var $ currentOBJ = $ (obj) .closest (". float_left"). find (". search_cont"). $ currentobj.animate ({width: "100 ٪"} ، 1000) ؛ $ currentObj.attr ("Data-Search" ، "show") ؛ // Stop Event Bubble event event.stoppropagation () ؛} function Stopevent (obj ، event) {// stop event bubbles event.stoppropagation () ؛} </script>لمزيد من المعلومات حول المحتوى المتعلق بـ javaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، "ملخص لمهارات خوارزمية بحث JavaScript" ، "ملخص لتأثيرات الرسوم المتحركة JavaScript و Techniques و" ملخص ". خوارزميات وتقنيات JavaScript Traversal "، و" ملخص استخدام العمليات الرياضية JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.