Bootstrap Dropdown mit Hover

OK, was ich brauche, ist ziemlich einfach.

Ich habe eine Navigationsleiste mit einigen Dropdown-Menüs eingerichtet (mit class="dropdown-toggle" data-toggle="dropdown"), und sie funktioniert einwandfrei .

Die Sache ist, es funktioniert " onClick", während ich es vorziehen würde, wenn es " onHover" funktioniert .

Gibt es eine eingebaute Möglichkeit, dies zu tun?

Die einfachste Lösung wäre CSS. Fügen Sie etwas hinzu wie ...

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

Geige arbeiten

Der beste Weg, dies zu tun, besteht darin, das Bootstraps-Klickereignis mit einem Hover auszulösen. Auf diese Weise sollte es weiterhin berührungsgerätefreundlich bleiben

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

Sie können die Schwebefunktion von jQuery verwenden.

Sie müssen nur die Klasse hinzufügen open wenn die Maus eintritt, und die Klasse entfernen, wenn die Maus das Dropdown-Menü verlässt.

Hier ist mein Code:

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

Ein einfacher Weg, jQuery zu verwenden, ist folgender:

$(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);
    });  
});

Für CSS wird es verrückt, wenn Sie auch darauf klicken. Dies ist der Code, den ich verwende. Er ändert auch nichts für die mobile Ansicht.

$('.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');
        }
    }
});

In Twitter ist Bootstrap nicht implementiert, aber Sie können dieses Plugin verwenden

Update 1:

Gleiche Frage hier

Bewegen Sie den Mauszeiger über die Navigationselemente, um zu sehen, dass sie beim Schweben aktiviert werden. http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

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.

Dies ist, was ich benutze, um es mit etwas jQuery beim Hover zum Dropdown zu bringen

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});

Versuchen Sie dies mit der Hover-Funktion bei Fadein-Fadeout-Animationen

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

Auf diese Weise können Sie Ihre eigene Hover-Klasse für Bootstrap erstellen:

CSS:

/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
   display: block;
}

Die Ränder werden so eingestellt, dass ein unerwünschtes Schließen vermieden wird. Sie sind optional.

HTML:

<div class="btn-group hover_drop_down">
  <button type="button" class="btn btn-default" data-toggle="dropdown"></button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

Vergessen Sie nicht, das Schaltflächenattribut data-toggle = "dropdown" zu entfernen, wenn Sie onclick open entfernen möchten. Dies funktioniert auch, wenn die Eingabe mit einem Dropdown angehängt wird.

Dadurch wird die Navigationsleiste nur angezeigt, wenn Sie sich nicht auf einem mobilen Gerät befinden, da ich finde, dass das Bewegen der Navigation auf mobilen Geräten nicht gut funktioniert:

    $( document ).ready(function() {

    $( 'ul.nav li.dropdown' ).hover(function() {
        // you could also use this condition: $( window ).width() >= 768
        if ($('.navbar-toggle').css('display') === 'none' 
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    }, function() {
        if ($('.navbar-toggle').css('display') === 'none'
            && false === ('ontouchstart' in document)) {

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

});

Ich probiere andere Lösungen aus, ich verwende Bootstrap 3, aber das Dropdown-Menü wird zu schnell geschlossen, um darüber zu wechseln

Angenommen, Sie fügen li class = "dropdown" hinzu, ich habe eine Zeitüberschreitung hinzugefügt

var hoverTimeout;
$('.dropdown').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('open');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('open');
    }, 150);
});

Aktualisiert mit einem richtigen Plugin

Ich habe ein geeignetes Plugin für die Dropdown-Hover-Funktion veröffentlicht, in dem Sie sogar definieren können, was passiert, wenn Sie auf klicken dropdown-toggle Element :

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

Warum habe ich es geschafft, wenn es schon viele Lösungen gibt?

Ich hatte Probleme mit allen zuvor vorhandenen Lösungen. Die einfachen CSS verwenden die .openKlasse für das nicht .dropdown, daher gibt es keine Rückmeldung zum Dropdown-Umschaltelement, wenn das Dropdown sichtbar ist.

Die js stören das Klicken auf .dropdown-toggle, so dass das Dropdown beim Hover angezeigt wird und beim Klicken auf ein geöffnetes Dropdown ausgeblendet wird. Wenn Sie die Maus herausziehen, wird das Dropdown erneut angezeigt. Einige der js-Lösungen bremsen die iOS-Kompatibilität, andere Plugins funktionieren nicht in modernen Desktop-Browsern, die Touch-Ereignisse unterstützen.

Aus diesem Grund habe ich das Bootstrap Dropdown Hover- Plugin erstellt, das all diese Probleme verhindert, indem nur die Standard-Bootstrap-Javascript-API ohne Hack verwendet wird.

    $('.navbar .dropdown').hover(function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
    }, function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
    });

Das Auslösen eines clickEreignisses mit a hoverhat einen kleinen Fehler. Wenn mouse-inund dann clickerzeugt ein umgekehrter Effekt. Es openswann mouse-outund closewann mouse-in. Eine bessere Lösung:

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

html

        <div class="dropdown">

            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown Example <span class="caret"></span>
            </button>

            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>

        </div> 

jquery

        $(document).ready( function() {                

            /* $(selector).hover( inFunction, outFunction ) */
            $('.dropdown').hover( 
                function() {                        
                    $(this).find('ul').css({
                        "display": "block",
                        "margin-top": 0
                    });                        
                }, 
                function() {                        
                    $(this).find('ul').css({
                        "display": "none",
                        "margin-top": 0
                    });                        
                } 
            );

        });

Codepen

Die von mir vorgeschlagene Lösung erkennt, ob das Gerät nicht berührt wird und dass das navbar-toggle(Hamburger-Menü) nicht sichtbar ist, und lässt das übergeordnete Menüelement beim Schweben das Untermenü anzeigen und folgt dem Link beim Klicken .

Macht auch den Rand nach oben, da die Lücke zwischen der Navigationsleiste und dem Menü in einigen Browsern Sie nicht zu den Unterelementen schweben lässt

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

Dropdown-Menü "Bootstrap" Arbeiten Sie am Hover und bleiben Sie beim Klicken geschlossen, indem Sie die Eigenschaftsanzeige hinzufügen : block; in CSS und Entfernen dieser Attribute data-toggle = "dropdown" role = "button" aus dem Button-Tag

.dropdown:hover .dropdown-menu {
  display: block;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">                                     
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

</body>
</html>