Sie haben also diesen Code:
<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>
Normalerweise funktioniert es bei einem Klickereignis, und Sie möchten, dass es bei einem Schwebeereignis funktioniert. Dies ist sehr einfach, verwenden Sie einfach diesen Javascript / JQuery-Code:
$(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();
})
})
})
Das funktioniert sehr gut und hier ist die Erklärung: Wir haben eine Schaltfläche und ein Menü. Wenn wir mit der Maus über die Schaltfläche fahren, wird das Menü angezeigt, und wenn wir mit der Maus über die Schaltfläche fahren, wird das Menü nach 100 ms ausgeblendet. Wenn Sie sich fragen, warum ich das benutze, brauchen Sie Zeit, um den Cursor von der Schaltfläche über das Menü zu ziehen. Wenn Sie im Menü sind, wird die Zeit zurückgesetzt und Sie können so oft dort bleiben, wie Sie möchten. Wenn Sie das Menü verlassen, wird das Menü sofort ohne Zeitüberschreitung ausgeblendet.
Ich habe diesen Code in vielen Projekten verwendet. Wenn Sie Probleme bei der Verwendung haben, können Sie mir gerne Fragen stellen.