Bootstrap Dropdown con Hover

OK, quindi quello di cui ho bisogno è abbastanza semplice.

Ho impostato una barra di navigazione con alcuni menu a discesa (usando class="dropdown-toggle" data-toggle="dropdown"), e funziona benissimo.

Il fatto è che funziona " onClick", mentre preferirei se funzionasse " onHover".

C'è un modo integrato per farlo?

La soluzione più semplice sarebbe nei CSS. Aggiungi qualcosa come ...

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

Fiddle di lavoro

Il modo migliore per farlo è semplicemente innescare l'evento click bootstrap con un passaggio del mouse. In questo modo, dovrebbe comunque rimanere compatibile con i dispositivi touch

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

È possibile utilizzare la funzione hover di jQuery.

Devi solo aggiungere la classe openquando il mouse entra e rimuovere la classe quando il mouse lascia il menu a discesa.

Ecco il mio codice:

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

Un modo semplice, usando jQuery, è questo:

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

Per CSS diventa pazzo quando fai clic anche su di esso. Questo è il codice che sto usando, inoltre non cambia nulla per la visualizzazione mobile.

$('.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 Bootstrap non è implementato ma è possibile utilizzare questo plugin

Aggiornamento 1:

Stessa domanda qui

Passa il mouse sopra gli elementi di navigazione per vedere che si attivano al passaggio del mouse. http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

Quindi hai questo codice:

<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>

Normalmente funziona all'evento click e vuoi che funzioni all'evento hover. Questo è molto semplice, basta usare questo codice 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();
        })
    })
})

Funziona molto bene ed ecco la spiegazione: abbiamo un pulsante e un menu. Quando si passa il mouse sul pulsante, viene visualizzato il menu e quando si passa il mouse sul pulsante, il menu viene nascosto dopo 100 ms. Se ti chiedi perché lo uso, è perché hai bisogno di tempo per trascinare il cursore dal pulsante sul menu. Quando si è nel menu, l'ora viene ripristinata e si può rimanere lì tutte le volte che si desidera. Quando esci dal menu, nasconderemo il menu all'istante senza alcun timeout.

Ho usato questo codice in molti progetti, se riscontri problemi nell'usarlo, sentiti libero di farmi domande.

Questo è quello che uso per farlo cadere al passaggio del mouse con alcuni jQuery

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

Prova questo usando la funzione hover con animazioni di dissolvenza in dissolvenza

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

Questo ti aiuterà a creare la tua classe hover per bootstrap:

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;
}

I margini sono impostati per evitare chiusure indesiderate e sono opzionali.

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>

Non dimenticare di rimuovere l'attributo button data-toggle = "dropdown" se vuoi rimuovere onclick open, e questo funzionerà anche quando l'input è accodato con dropdown.

Questo sorvola la barra di navigazione solo quando non sei su un dispositivo mobile, perché trovo che il passaggio del mouse sulla navigazione non funzioni bene su dispositivi mobili:

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

});

Provo altre soluzioni, sto usando bootstrap 3, ma il menu a discesa si chiude troppo rapidamente per spostarci sopra

supponendo che tu abbia aggiunto class = "dropdown" a li, ho aggiunto un timeout

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

Aggiornato con un plugin appropriato

Ho pubblicato un plug-in adeguato per la funzionalità di passaggio del mouse a discesa, in cui è anche possibile definire cosa succede quando si fa clic su dropdown-toggle sull'elemento:

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

Perché l'ho fatto, quando ci sono già molte soluzioni?

Ho avuto problemi con tutte le soluzioni precedentemente esistenti. Quelli CSS semplici non usano la .openclasse su .dropdown, quindi non ci sarà feedback sull'elemento toggle del menu a discesa quando il menu a discesa è visibile.

Quelli j stanno interferendo con il clic su .dropdown-toggle, quindi il menu a discesa viene visualizzato al passaggio del mouse, quindi lo nasconde quando si fa clic su un menu a discesa aperto e, spostando il mouse, il menu a discesa si attiverà nuovamente. Alcune delle soluzioni js frenano la compatibilità iOS, alcuni plugin non funzionano sui moderni browser desktop che supportano gli eventi touch.

Ecco perché ho creato il plug-in Dropst Hover Bootstrap che previene tutti questi problemi utilizzando solo l'API javascript standard Bootstrap, senza alcun hack.

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

Attivazione a click evento con a hoverha un piccolo errore. Se mouse-ine poi a clickcrea l'effetto viceversa. E opensquando mouse-oute closequando mouse-in. Una soluzione migliore:

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

La soluzione che sto proponendo rileva se il suo dispositivo non è a sfioramento e che il navbar-toggle(menu hamburger) non è visibile e rende la voce del menu principale che rivela il sottomenu al passaggio del mouse e segui il suo collegamento al clic .

Rende anche il margine 0 in alto perché lo spazio tra la barra di navigazione e il menu in alcuni browser non ti permetterà di passare ai sottotemi

$(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>

Menu a discesa Bootstrap Lavora al passaggio del mouse e rimani vicino al clic aggiungendo display proprietà : blocco; in css e rimozione di questi attributi data-toggle = "dropdown" role = "button" dal tag button

.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>