جافاسكريبت - قائمة منسدلة في Bootstrap عند المرور بالفأرة

حسنًا، ما أحتاجه واضح إلى حد كبير.

لقد قمت بإعداد شريط تنقل مع بعض قوائم منسدلة فيه (باستخدام class="dropdown-toggle" data-toggle="dropdown")، ويعمل بشكل جيد.

المشكلة هي أنه يعمل بـ "onClick"، بينما كنت أفضل لو كان يعمل بـ "onHover".

هل هناك أي طريقة مدمجة للقيام بذلك؟

الإجابة رقم 1

أسهل حل سيكون في CSS. أضف شيئًا مثل:

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}

JSFiddle

الإجابة رقم 2

أفضل طريقة للقيام بذلك هي ببساطة تفعيل حدث النقر الخاص بـ Bootstrap عند التحويم. بهذه الطريقة، يجب أن يظل مناسبًا للأجهزة التي تعمل باللمس.

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

الإجابة رقم 3

يمكنك استخدام دالة hover في jQuery.

كل ما تحتاجه هو إضافة الفئة open عند دخول الماوس وإزالة الفئة عند مغادرة الماوس للقائمة المنسدلة.

إليك رمزي:

$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});

الإجابة رقم 4

طريقة سهلة، باستخدام jQuery، هي هذه:

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});

الإجابة رقم 5

لـ CSS يصبح الأمر مجنونًا عندما تنقر عليه أيضًا. هذا هو الكود الذي أستخدمه، ولا يغير أي شيء أيضًا لعرض الجوال.

$('.dropdown').mouseenter(function(){
    if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!$(this).hasClass('open')) { // Keeps it open when hover it again
            $('.dropdown-toggle', this).trigger('click');
        }
    }
});