Vì vậy, bạn có mã này:
<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>
Thông thường nó hoạt động trên sự kiện nhấp chuột và bạn muốn nó hoạt động trên sự kiện di chuột. Điều này rất đơn giản, chỉ cần sử dụng mã javascript / jquery này:
$(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();
})
})
})
Điều này hoạt động rất tốt và đây là lời giải thích: chúng tôi có một nút, và một menu. Khi chúng ta di chuột vào nút, chúng ta sẽ hiển thị menu và khi chúng ta di chuột ra khỏi nút, chúng ta sẽ ẩn menu sau 100ms. Nếu bạn tự hỏi tại sao tôi sử dụng nó, là bởi vì bạn cần thời gian để kéo con trỏ từ nút trên menu. Khi bạn ở trên menu, thời gian được đặt lại và bạn có thể ở đó bao nhiêu lần tùy ý. Khi bạn thoát menu, chúng tôi sẽ ẩn menu ngay lập tức mà không có thời gian chờ.
Tôi đã sử dụng mã này trong nhiều dự án, nếu bạn gặp bất kỳ vấn đề nào khi sử dụng nó, vui lòng đặt câu hỏi cho tôi.