Bootstrap liste Déroulante avec Hover

la meilleure façon de le faire est de simplement déclencher un événement de claquement de bootstraps avec un hover. De cette façon, il doit toujours rester facile à toucher

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

vous pouvez utiliser la fonction hover de jQuery.

vous avez juste besoin d'ajouter la classe open quand la souris entre et supprimer la classe quand la souris quitte le dropdown.

Voici mon code:

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

un moyen facile, en utilisant jQuery, est celui-ci:

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

pour CSS Il devient fou quand vous cliquez aussi sur elle. C'est le code que j'utilise, il ne change rien non plus pour mobile view.

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

sur Twitter Bootstrap n'est pas implémenté mais vous pouvez utiliser le ce plugin

Maj 1:

survolent les éléments nav pour voir s'ils s'activent en vol stationnaire. http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown / #

donc vous avez ce 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>

normalement, il fonctionne sur Click event, et vous voulez qu'il fonctionne sur hover event. C'est très simple, il suffit d'utiliser ce code 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();
        })
    })
})

Cela fonctionne très bien et voici l'explication: nous avons un bouton et un menu. Quand nous plantons le bouton nous affichons le menu, et quand nous Mouse out du bouton nous cachons le menu après 100ms. Si tu te demandes pourquoi j'utilise ça, c'est parce que tu as besoin de temps. pour faire glisser le curseur à partir du bouton sur le menu. Lorsque vous êtes sur le menu, le temps est remis à zéro et vous pouvez y rester autant de temps que vous le souhaitez. Lorsque vous quittez le menu, nous allons cacher le menu instantanément sans aucun délai.

j'ai utilisé ce code dans de nombreux projets, si vous rencontrez un problème en l'utilisant, n'hésitez pas à me poser des questions.

C'est ce que j'utilise pour le faire tomber en vol stationnaire avec quelques 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');
    });
});

essayez ceci en utilisant la fonction hover avec FADEIN fadeout animations

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

cela survole seulement la barre de navigation quand vous n'êtes pas sur un appareil mobile, parce que je trouve que le fait de survoler la navigation ne fonctionne pas bien sur les divices mobiles:

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

});

j'essaie d'autres solutions, j'utilise bootstrap 3, mais le menu déroulant se ferme trop rapidement pour passer au dessus

suppose que vous ajoutez class= "dropdown" à li, j'ai ajouté un timeout

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

mis à jour avec un plugin approprié

j'ai publié un plugin approprié pour la fonctionnalité dropdown hover, dans lequel vous pouvez même définir ce qui se passe en cliquant sur l'élément dropdown-toggle :

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

pourquoi l'ai-je fait, alors qu'il y a déjà de nombreuses solutions?

j'ai eu des problèmes avec toutes les déjà les solutions existantes. Les CSS simples n'utilisent pas la classe .open sur le .dropdown , donc il n'y aura pas de retour sur l'élément de basculement de descente lorsque la descente est visible.

les js ones interfèrent avec le clic sur .dropdown-toggle , de sorte que le dropdown apparaît en stationnaire, puis le cache en cliquant sur un dropdown ouvert, et le déplacement de la souris déclenchera le dropdown pour apparaître à nouveau. Certaines des solutions js freinent iOS compatibilité, certains plugins ne fonctionnent pas sur les navigateurs de bureau moderne, qui soutiennent les événements tactiles.

C'est pourquoi j'ai fait le plugin Bootstrap Dropdown Hover qui prévient tous ces problèmes en utilisant uniquement L'API javascript Bootstrap standard, sans aucun piratage.

cela vous aidera à créer votre propre classe hover pour 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;
}

sont réglées pour éviter la fermeture non désirée et sont optionnelles.

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>

n'oubliez pas de supprimer le bouton attribut data-toggle=" dropdown " si vous voulez supprimer onclick open, et cela fonctionnera aussi lorsque l'entrée est ajoutée avec dropdown.

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

déclenchant un click événement avec un hover a une petite erreur. Si mouse-in et alors un click crée l'effet vice-versa. It opens quand mouse-out et close quand mouse-in . Une meilleure solution:

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

la solution que je propose détecte si son dispositif non tactile et que le navbar-toggle (menu hamburger) n'est pas visible et fait l'article de menu parent révélant sous-menu sur le vol stationnaire et et suivre son lien sur le clic .

rend également TNE marge-top 0 parce que l'écart entre le navbar et le menu dans un certain navigateur ne vous permettra pas de stationner vers les sous-thèmes

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