Yani bu koda sahipsiniz:
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
Normalde tıklama olayında çalışır ve fareyle üzerine gelme olayında çalışmasını istersiniz. Bu çok basit, sadece bu javascript / jquery kodunu kullanın:
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
Bu çok iyi çalışıyor ve işte açıklama: bir düğmemiz ve bir menümüz var. Düğmenin üzerine geldiğimizde menüyü görüntüleriz ve düğmenin faresini kapattığımızda 100 ms sonra menüyü gizleriz. Bunu neden kullandığımı merak ediyorsanız, imleci menü üzerindeki düğmeden sürüklemek için zamana ihtiyacınız var. Menüdeyken, zaman sıfırlanır ve orada istediğiniz kadar kalabilirsiniz. Menüden çıktığınızda, herhangi bir zaman aşımı olmadan menüyü anında gizleyeceğiz.
Bu kodu birçok projede kullandım, eğer herhangi bir sorunla karşılaşırsanız, bana soru sormaktan çekinmeyin.