Отже, у вас є цей код:
<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>
Зазвичай він працює на події натискання, і ви хочете, щоб він працював над подією наведення. Це дуже просто, просто використовуйте цей код javascript / jquery:
$(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();
})
})
})
Це працює дуже добре, і ось пояснення: у нас є кнопка та меню. Коли ми натискаємо кнопку, ми відображаємо меню, а при натисканні кнопки ми приховуємо меню через 100 мс. Якщо вам цікаво, чому я це використовую, це тому, що вам потрібен час, щоб перетягнути курсор з кнопки на меню. Коли ви перебуваєте в меню, час скидається, і ви можете залишитися там скільки завгодно часу. Коли ви виходите з меню, ми будемо миттєво приховувати меню без будь-якого тайм-ауту.
Я використовував цей код у багатьох проектах, якщо у вас виникли проблеми з його використанням, не соромтесь задавати мені питання.